欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery plugin animsition使用小结

程序员文章站 2022-04-29 07:57:06
用法整理 下载地址: 文档地址: 实现的效果是,各种不同效果的转场效果

用法整理

下载地址:

文档地址:

实现的效果是,各种不同效果的转场效果

jQuery plugin animsition使用小结

<div class="animsition">
  <div class="item bg-indigo">
   <h1>animsition: sandbox</h1>
  </div>
  <h2>defaults</h2>
  <ol>
   <li><a class="animsition-link" data-animsition-out-class="rotate-out"
 data-animsition-out-duration="500" href="page1.html" rel="external nofollow" >basic</a></li>
   <li><a class="animsition-link" data-animsition-out-class="rotate-out"
 data-animsition-out-duration="500" href="page2.html" rel="external nofollow" >options</a></li>
  </ol>
 </div>

<script src="jquery-3.2.1.min.js"></script>
  <script src="js/animsition.js"></script>
 <script>
  $(document).ready(function() {
 $(".animsition").animsition({
  inclass: 'flip-in-y',
  outclass: 'flip-out-y',
  induration: 1500,
  // outduration: 800,
  linkelement: '.animsition-link',
  // e.g. linkelement: 'a:not([target="_blank"]):not([href^="#"])'
  loading: false,
  loadingparentelement: 'body', //animsition wrapper element
  loadingclass: 'animsition-loading',
  loadinginner: '', // e.g '<img src="loading.svg" />'
  timeout: false,
  timeoutcountdown: 5000,
  onloadevent: true,
  browser: [ 'animation-duration', '-webkit-animation-duration'],
  // "browser" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
  // the default setting is to disable the "animsition" in a browser that does not support "animation-duration".
  overlay : false,
  overlayclass : 'animsition-overlay-slide',
  overlayparentelement : 'body',
  // transition: function(url){ window.location.href = url;}
 });
});
  </script>

  注意!!!css文件的.animistion类的opacity设置了为0;需要改过来,要不然页面元素看不到!!!

总结

以上所述是小编给大家介绍的jquery plugin animsition使用小结,希望对大家有所帮助