Javascript 可见性：隐藏与显示：无与不透明度：0
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14731049/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
visibility:hidden vs display:none vs opacity:0
提问by Cihad Turhan
I'm currently starting on an animation project. In the project I'll have more than 40000 divs and animate them iteratively. If any of divs are in passive state (i.e. it's not animating at least for 2 seconds), I won't display them to increase animation performance.
我目前正在开始一个动画项目。在该项目中，我将有超过 40000div秒并迭代地为它们设置动画。如果divs 中的任何一个处于被动状态（即它至少有 2 秒没有动画），我将不会显示它们以提高动画性能。
The question is: which css property is the most suitable for this?
问题是：哪个css属性最适合这个？
.passive1{
display:none
}
.passive2{
visibility:hidden;
}
.passive3{
opacity:0;
}
And how can I measure rendering performance like fps, gpu usage?
以及如何衡量 fps、gpu 使用率等渲染性能？
采纳答案by DF_
The answer found herewill answer your first question (most likely display:noneas the space is collapsed completely).
此处找到的答案将回答您的第一个问题（很可能display:none是因为空间已完全折叠）。
To your second question, tools such as thiswill probably be useful for you.However 40,000 divs sounds like way too many and you will probably have better performance using canvas or SVG (for example, using the KineticJSlibrary as this handles animations - transformation, rotation, scale, etc.) for you.
你的第二个问题，工具，比如这将可能对您有用。然而，40,000 个 div 听起来太多了，使用 canvas 或 SVG（例如，使用KineticJS库来处理动画 - 转换、旋转、缩放等）可能会为您提供更好的性能。
回答by Nishant
They all render the element invisible, yet differ in whether it occupies space and consumes clicks
它们都使元素不可见，但在是否占用空间和消耗点击方面有所不同
+--------------------+----------------+-----------------+
| Property | occupies space | consumes clicks |
+--------------------+----------------+-----------------+
| opacity: 0 | ? | ? |
+--------------------+----------------+-----------------+
| visibility: hidden | ? | ? |
+--------------------+----------------+-----------------+
| display: none | ? | ? |
+--------------------+----------------+-----------------+
?: yes
?: no
And when we say it consumes click, that means it also consumes other pointer events like ondblclick,onmousedown,onmousemove etc.
当我们说它消耗点击时，这意味着它也消耗其他指针事件，如 ondblclick、onmousedown、onmousemove 等。
In essence "visibility: hidden" behaves like a combination of "opacity: 0" and "pointer-events: none".
本质上，“可见性：隐藏”的行为类似于“不透明度：0”和“指针事件：无”的组合。
回答by DF_
display:nonewill hide the whole element and remove that from layout space whereas visibility:hiddenhides an element but take up the same space as before.
Opacity can be used if you want to create transparency or fade effect.
display:none将隐藏整个元素并将其从布局空间中删除，而visibility:hidden隐藏元素但占用与以前相同的空间。
如果要创建透明度或淡入淡出效果，可以使用不透明度。
回答by Fabian Schmengler
display:nonebecause the divs are taken out of the flow then, thus their position does not have to be calculated.
display:none因为然后将 div 从流中取出，因此不必计算它们的位置。
That being said, 40000 divs sounds crazy. Did you consider the alternatives like HTML5 canvas or SVG?
话虽如此，40000 个 div 听起来很疯狂。您是否考虑过像 HTML5 canvas 或 SVG 这样的替代品？
回答by Elias Bundala
Perfomamce will be an issue if display:none or visibility:hidden is used since they trigger paint and layout in most browsers which means your browser will redraw the viewport whenever those two changes so I will recommend opacity but still for that number of divs it will still be not perfomant as expected you can try webgl using a library called html-gl which render your divs in webgl check https://github.com/PixelsCommander/HTML-GL
如果使用 display:none 或visibility:hidden，Perfomamce 将是一个问题，因为它们会在大多数浏览器中触发绘制和布局，这意味着您的浏览器将在这两个更改时重新绘制视口，因此我建议使用不透明度，但仍然会为该数量的 div仍然没有达到预期的效果，您可以使用名为 html-gl 的库尝试 webgl，该库在 webgl 中呈现您的 div 检查https://github.com/PixelsCommander/HTML-GL
回答by ankita patel
display:none: occupies no space, no elements here.
display:none: 不占空间，这里没有元素。
opacity:0: occupies space, you can click on element behind it.
opacity:0: 占用空间，可以点击后面的元素。
visibility:hidden: occupies space and you can not click element behind it.
visibility:hidden: 占用空间，你不能点击它后面的元素。
回答by Arlan T
Sometime i use visibility and opacity together to achieve effect to avoid click event
有时我会同时使用可见性和不透明度来达到避免点击事件的效果
e.g.
例如
normal state/element removed from screen:
从屏幕中删除的正常状态/元素：
visibility:hidden;
opacity:0;
transition: all .3s;
hover state/element on screen:
屏幕上的悬停状态/元素：
visibility:visible;
opacity:1;
