Question

我目前正在开始一个动画项目。在项目中，我将有超过40000 div s并迭代地为它们制作动画。如果div中的任何一个处于被动状态（即它不至少动画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

找到答案here将回答您的第一个问题（最有可能display:none，因为空间已完全折叠。）

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

Answer 3

display:none因为div已从流程中取出，因此无需计算其位置。

话虽如此，40000个div听起来很疯狂。您是否考虑过像HTML5 canvas或SVG这样的替代品？

Answer 4

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

Answer 5

如果display：none或visibility：hidden，则会出现问题，因为它们在大多数浏览器中触发绘制和布局，这意味着只要这两个更改，浏览器就会重绘视口，所以我会建议不透明度，但仍然是divs它仍然不会像预期的那样表现你可以使用名为html-gl的库来尝试webgl，它会在webgl中检查你的div https://github.com/PixelsCommander/HTML-GL

Answer 6

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

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

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

                     collapse events taborder
opacity: 0              No     Yes     Yes
visibility: hidden      No     No      No
visibility: collapse    *      No      No
display: none          Yes     No      No

* Yes inside a table element, otherwise No.

从link获得

Answer 7

有时我会同时使用可见性和不透明度来实现避免点击事件的效果

e.g。

从屏幕上删除正常状态/元素：

visibility:hidden;
opacity:0;
transition: all .3s;

屏幕上悬停状态/元素：

visibility:visible;
opacity:1;

Answer 8

在调查悬停时发现此线程：Safari 移动版中的错误

确认 ProvisioningState: Failed 是一种有效的方法（就我而言，谢谢大家）。 opacity: 0 对其进行了足够的修复以使其可行（仍然需要在屏幕旋转 [宽度更改] 上进行烦人的 js 重绘）。

有关我使用 opacity: 0 修复的错误的背景信息：悬停在包含 div 的 li 上，当悬停（或在移动设备上单击）日历条目时会显示该 div。在 Safari 移动版中真的随机工作/不工作 - 甚至更奇怪的是屏幕旋转 ++ 上的行为变化 [nb 不涉及媒体查询，所以不是那样]。

太烦人了，因为在我尝试过的所有其他浏览器中都有效。

Answer 9

display:none：不占空间，没有元素。

opacity:0：占用空间，你可以点击它背后的元素。

visibility:hidden：占用空间，您无法点击其背后的元素。

visibility：hidden vs display：none vs opacity：0

9 个答案: