fe-weekly-questions icon indicating copy to clipboard operation
fe-weekly-questions copied to clipboard

Published 20 hours ago • verified publisher icon LuckyWinty

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

Open LuckyWinty opened this issue 4 years ago • 5 comments

LuckyWinty avatar Jun 07 '20 15:06 LuckyWinty

opacity=0

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

visibility=hidden

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

display=none

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

LuckyWinty avatar Jun 07 '20 15:06 LuckyWinty

结合重绘回流说一说？

HoweZhang avatar Jun 09 '20 06:06 HoweZhang

触发重排 reflow

display=none

触发回流 repaint

visibility=hidden
opacity=0

坐等大佬详解

lstoryc avatar Jun 09 '20 06:06 lstoryc

触发重排 reflow

display=none

触发回流 repaint

visibility=hidden
opacity=0

坐等大佬详解

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

gdutwyg avatar Jul 04 '20 05:07 gdutwyg

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

触发回流(重排：reflow)

GolderBrother avatar Aug 24 '20 15:08 GolderBrother