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

分析比较 display: none、opacity: 0、visibility: hidden 的优劣 #20

Open

lxinr opened this issue Apr 24, 2019 · 0 comments

Owner

lxinr commented Apr 24, 2019

display: none

浏览器不会渲染 display 属性为 none 的元素，不占据空间
无法进行 DOM 事件监听
会触发重排(回流)
不会被子孙继承
transtion不支持display

opacity: 0

透明度为100%，元素隐藏，会渲染，占据空间
可以事件监听，比如点击
会触发重绘，性能较好
会被子孙继承，子孙元素无法取消隐藏
transtion不支持opacity

visibility: hidden

元素被隐藏，但是会被渲染不会消失，占据空间
无法进行 DOM 事件监听
会触发重绘，性能较高
会被子元素继承，子元素可以通过设置 visibility: visible; 来取消隐藏
transtion不支持visibility

The text was updated successfully, but these errors were encountered:

lxinr changed the title ~~分析比较 display: none、opacity: 0、visibility: hidden 优劣~~ 分析比较 display: none、opacity: 0、visibility: hidden 的优劣

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment