主机格调

刚做移动端页面的时候,看到一些成熟的网页做淡入淡出的弹窗遮罩效果,都喜欢用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加入了透明度,既看不见又摸不着也就消失了。

>>原创文章,欢迎转载。转载请注明:转载自西门的后花园,谢谢!
>>原文链接地址:http://ons.me/561.html