欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

zepto.js使用注意点

程序员文章站 2022-05-03 18:03:36
...

(注:以下解决方案只考虑现代浏览器(IE>=IE9)和手机端)

fadeIn显隐遮罩层

问题重现

  • zepto的fadeIn方法,在显示透明的遮罩层(如opacity: 0.5)时,会把该图层最终的opacity设置为1,这显然不符合我们的预期

解决思路

  • 通过css3动画transition的方式来达到显隐的效果
  • 给遮罩层设置样式

    .mask {
         display: none;
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, .5);
         opacity: 0;
         transition: opacity 1s;
     }
  • $('.mask').show()会渐变的显示遮罩层(不要使用fadeIn)

  • $('.mask').fadeOut()会渐变的隐藏遮罩层

Zepto 使用中的一些注意点(转)