使用CSS3的transition、visibility和opacity做淡入淡出效果不兼容的解决方案

刚做移动端页面的时候，看到一些成熟的网页做淡入淡出的弹窗遮罩效果，都喜欢用css里transition、visibility和opacity这三个属性，通过改变他们的值，结合js增减class即可，非常方便。

当时觉得好神奇，所以一直用到现在。这篇文章里还重点介绍过这个方法《小tip: transition与visibility》

我写了个一直在用的淡入淡出弹窗遮罩效果DEMO

上周做的一个项目，开发找我报bug，说是一个界面出不来，我看了下就是这段代码。然后重新测试了一下，发现这段代码在iOS8、9、10都有问题，之前为什么都没发现？我又找到2年前写的弹窗DEMO 是兼容的呀？

经过群友“is”的指点，发现原来是页面硬件加速的原因，我2年前写的DEMO里弹窗是用top:50%;left:50%;transform:translate3d(-50%, -50%, 0);居中的。页面开启了硬件加速，所以这个淡入淡出的效果就正常了。

解决方案1，就是在任意元素上用css开启硬件加速，我下面DEMO里加了一句transform:translate3d(0,0,0);，当然你也可以加其他的，只要触发页面开启硬件加速就可以。

解决方案1 DEMO

解决方案2，也是更合理的方案。是群友“Evan”指导，改用pointer-events:none。下面是pointer-events:none方案的DEMO，我测试过，全兼容，唯一缺陷是IE只兼容11+，IE10兼容不了。

解决方案2 DEMO

pointer-events:none是什么意思呢？CSS手册里写的是“元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器”。读了几遍，感觉似懂非懂，只能搜索其他人介绍这个属性的文章了。这篇文章里，作者说了句人话“pointer-events:none的作用是让元素实体“虚化”。例如一个应用pointer-events:none的按钮元素，则我们在页面上看到的这个按钮，只是一个虚幻的影子而已，您可以理解为海市蜃楼，幽灵的躯体。当我们用手触碰它的时候可以轻易地没有任何感觉地从中穿过去。一切都是幻影！”

结合上面两段话，我的理解是加了pointer-events:none后，这个DOM虽然看得见，但鼠标点上去会无视他。真神奇！然后方案2加入了透明度，既看不见又摸不着也就消失了。

评论列表

西门的后花园