(注:以下解决方案只考虑现代浏览器(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()
会渐变的隐藏遮罩层