LuckyWinty / fe-weekly-questions

A pro to record some interview questions every week...
MIT License
341 stars 34 forks source link

说说visibility=hidden, opacity=0,display:none的区别 #64

Open LuckyWinty opened 4 years ago

LuckyWinty commented 4 years ago

opacity=0

该元素隐藏起来了,但不会改变页面布局,并且,如果该元素已经绑定一些事件,如click事件,那么点击该区域,也能触发点击事件的

visibility=hidden

该元素隐藏起来了,但不会改变页面布局,但是不会触发该元素已经绑定的事件

display=none

把元素隐藏起来,并且会改变页面布局,可以理解成在页面中把该元素删除掉一样。

HoweZhang commented 4 years ago

结合重绘回流说一说?

lstoryc commented 4 years ago

触发重排 reflow

display=none

触发回流 repaint

visibility=hidden
opacity=0

坐等大佬详解

gdutwyg commented 4 years ago

触发重排 reflow

display=none

触发回流 repaint

visibility=hidden
opacity=0

坐等大佬详解

reflow应该是回流, repaint应该是重绘

GolderBrother commented 4 years ago

触发重绘(repaint): visibility=hidden opacity=0

触发回流(重排:reflow)