为什么会有这个css代码段

Question

https://detail.m.tmall.com/it...

链接如上

pointer-events: auto;
opacity: 1;


pointer-events: none;
opacity: 0;
transition: opacity .3s 80ms;
will-change: opacity;

这个属性的逻辑是什么样的？？屏蔽事件？？一般弹窗的方式是display来控制，天猫这边用了opacity？

Answer 1

这个我觉的你自己需要思考一下，为什么天猫这样写。

首先，你应该了解浏览器的如何渲染一个页面，页面操作会有哪些影响。

比如这里，很简单的控制显示和隐藏，为什么选择使用opacity + poinet-events呢？为什么不用display呢？

其实原因很简单，页面刷新会触发reflow和repaint。这个是浏览器渲染界面消耗的大头。如果我使用display，那么元素隐藏了，但是display:none会出发reflow，而通过opacity + poinet-events只会出发了repaint，因为位置内有变化。

dom 操作变少，自然更快，所以我觉你你更应该比较的是 为什么不用visibility:hidden ,而用opacity + poinet-events。

顺带一个网站 https://caniuse.com/

兼容性问题，visibility，兼容到ie10，但是它也只触发repainting。

下来解决第二个问题： 为什么屏蔽事件呢，因为opacity仅仅是隐藏，但是因为控件还是在的，但是为了不让这个隐藏的控件不影响下层的事件响应，所以应该屏蔽事件。