在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 為什么會有這個css代碼段

為什么會有這個css代碼段

clipboard.png

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?

回答
編輯回答
久礙你

這個我覺的你自己需要思考一下,為什么天貓這樣寫。

首先,你應該了解瀏覽器的如何渲染一個頁面,頁面操作會有哪些影響。

比如這里,很簡單的控制顯示和隱藏,為什么選擇使用opacity + poinet-events呢?為什么不用display呢?

其實原因很簡單,頁面刷新會觸發(fā)reflow和repaint。這個是瀏覽器渲染界面消耗的大頭。如果我使用display,那么元素隱藏了,但是display:none會出發(fā)reflow,而通過opacity + poinet-events只會出發(fā)了repaint,因為位置內(nèi)有變化。

dom 操作變少,自然更快,所以我覺你你更應該比較的是 為什么不用visibility:hidden ,而用opacity + poinet-events。

順帶一個網(wǎng)站 https://caniuse.com/

兼容性問題,visibility,兼容到ie10,但是它也只觸發(fā)repainting。

下來解決第二個問題: 為什么屏蔽事件呢,因為opacity僅僅是隱藏,但是因為控件還是在的,但是為了不讓這個隱藏的控件不影響下層的事件響應,所以應該屏蔽事件。

2017年3月11日 03:48