用法整理
下載地址:https://github.com/blivesta/animsition
文檔地址:http://git.blivesta.com/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>
注意!?。ss文件的.animistion類的opacity設置了為0;需要改過來,要不然頁面元素看不到?。?!
總結
以上所述是小編給大家介紹的jQuery plugin animsition使用小結,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持!
新聞熱點
疑難解答