zepto.js使用注意点

Posted 2022-12-01 vcxiaohan2

(注：以下解决方案只考虑现代浏览器(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 使用中的一些注意点(转)