不知道大家对 plugin animsition有多少了解,本文通过实例代码给大家分享了jQuery plugin animsition用法,非常不错,具有参考借鉴价值,需要的朋友参考下吧,希望能帮助到大家。
用法整理
实现的效果是,各种不同效果的转场效果
<p class="animsition"> <p class="item bg-indigo"> <h1>Animsition: Sandbox</h1> </p> <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> </p> <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使用小结的详细内容。更多信息请关注PHP中文网其他相关文章!