jQuery plugin animsition怎么用

这篇文章给大家分享的是有关jQuery plugin animsition怎么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

用法整理

下载地址：https://github.com/blivesta/animsition

文档地址：http://git.blivesta.com/animsition/

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

<div class="animsition">   <div class="item bg-indigo">    <h2>Animsition: Sandbox</h2>   </div>   <h3>Defaults</h3>   <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怎么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！