手机微信小程序_jQuery plugin animsition使用小结

摘要: jQuery plugin animsition应用总结 文中根据案例编码给大伙儿共享了jQuery plugin animsition使用方法,十分非常好,具备参照效仿使用价值,必须的朋友参照一下吧使用方法梳理完成的实际...

jQuery plugin animsition使用小结       本文通过实例代码给大家分享了jQuery plugin animsition用法,非常不错,具有参考借鉴价值,需要的朋友参考下吧

用法整理

实现的效果是,各种不同效果的转场效果

 div 
 div 
 h1 Animsition: Sandbox /h1 
 /div 
 h2 Defaults /h2 
 " rel="external nofollow" Basic /a /li 
 " 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使用小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:网站免费建站