实例分享jQuerypluginanimsition使用小结

<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>