visibility:hidden vs display:none vs opacity:0

Question

我目前正在开始一个动画项目.在项目中,我将有超过40000 div秒,并迭代动画它们.如果divs中的任何一个处于被动状态(即它不至少动画2秒),我将不会显示它们以提高动画性能.

问题是:哪个css属性最适合这个？

.passive1{
   display:none
}

.passive2{
    visibility:hidden;
}

.passive3{
    opacity:0;
}

我如何测量渲染性能,如fps,gpu使用情况？

Answer 1

它们都使元素不可见,但它是否占用空间并消耗点击次数则不同

+--------------------+----------------+-----------------+
| Property           | occupies space | consumes clicks |
+--------------------+----------------+-----------------+
| opacity: 0         |        ?       |        ?        |
+--------------------+----------------+-----------------+
| visibility: hidden |        ?       |        ?        |
+--------------------+----------------+-----------------+
| display: none      |        ?       |        ?        |
+--------------------+----------------+-----------------+

?: yes
?: no

当我们说它消耗点击时,这意味着它也会消耗其他指针事件,如ondblclick,onmousedown,onmousemove等.

本质上,"visibility:hidden"的行为类似于"opacity:0"和"pointer-events:none"的组合.

Answer 2

这里找到的答案将回答您的第一个问题(很可能display:none是因为空间完全崩溃).

对于第二个问题,像这样的工具可能对你有用.然而,40,000个div听起来太多了,你可能会使用canvas或SVG获得更好的性能(例如,使用KineticJS库,因为它可以处理动画 - 转换,旋转,缩放等).

Answer 3

如果使用 display:none 或visibility:hidden ，则性能将是一个问题，因为它们会在大多数浏览器中触发绘制和布局，这意味着您的浏览器将在这两个更改时重新绘制视口，因此我建议使用不透明度，但仍然会为该数量的 div仍然没有达到预期的效果，您可以使用名为 html-gl 的库尝试 webgl，该库在 webgl 中呈现您的 div 检查https://github.com/PixelsCommander/HTML-GL

Answer 4

这是来自各种答案的经过验证的信息的汇编。

这些 CSS 属性中的每一个实际上都是独一无二的。除了使元素不可见之外，它们还具有以下附加效果：

1. 折叠元素通常占用的空间
2. 响应事件（例如，单击、按键）
3. 参加taborder

                     折叠事件标签
不透明度：0 否 是 是
可见性：隐藏 否 否 否
可见性：折叠 * 否 否
显示：无 是 否 否

* 在表格元素内是，否则否。

来自链接

Answer 5

display:none将隐藏整个元素并将其从布局空间中删除，而visibility:hidden隐藏元素但占用与以前相同的空间。
如果要创建透明度或淡入淡出效果，可以使用不透明度。