Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
LuckyWinty opened this issue Jun 7, 2020 · 5 comments
Open

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

LuckyWinty opened this issue Jun 7, 2020 · 5 comments
Labels
css

Comments

@LuckyWinty
Copy link
Owner

No description provided.

@LuckyWinty LuckyWinty added the css label Jun 7, 2020
@LuckyWinty
Copy link
Owner Author

opacity=0

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

visibility=hidden

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

display=none

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

@HoweZhang
Copy link

结合重绘回流说一说？

@lstoryc
Copy link

lstoryc commented Jun 9, 2020

触发重排 reflow

display=none

触发回流 repaint

visibility=hidden
opacity=0

坐等大佬详解

@gdutwyg
Copy link

gdutwyg commented Jul 4, 2020 •
edited

触发重排 reflow

display=none

触发回流 repaint

visibility=hidden
opacity=0

坐等大佬详解

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

@songning0605 songning0605 mentioned this issue Aug 16, 2020
Open
@GolderBrother
Copy link

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

触发回流(重排：reflow)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@lstoryc @gdutwyg @HoweZhang @LuckyWinty @GolderBrother