jQuery plugin animsition使用小结
程序员文章站
2022-04-29 07:57:06
用法整理
下载地址:
文档地址:
实现的效果是,各种不同效果的转场效果
用法整理
下载地址:
文档地址:
实现的效果是,各种不同效果的转场效果
<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使用小结,希望对大家有所帮助