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.js点击滑动显示隐藏
下一篇: 移动端插件-zepto.js简单实用