首页 > 编程 > JavaScript > 正文

jQuery plugin animsition使用小结

2019-11-19 15:26:53
字体:
来源:转载
供稿:网友

用法整理

下载地址: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>

  注意!!!css文件的.animistion类的opacity设置了为0;需要改过来,要不然页面元素看不到!!!

总结

以上所述是小编给大家介绍的jQuery plugin animsition使用小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表