可见性：隐藏与显示：无与不透明度：0

Question

我目前正在着手一个动画项目。在该项目中，我将拥有超过 40000 div 并以迭代方式为它们制作动画。如果 div 中的任何一个处于被动状态（即它至少有 2 秒没有动画），我不会显示它们以提高动画性能。

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

 .passive1{
   display:none
}

.passive2{
    visibility:hidden;
}

.passive3{
    opacity:0;
}

我如何衡量渲染性能，如 fps、gpu 使用情况？

原文由 Cihad Turhan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

对于您的第二个问题，诸如此类 的 工具可能对您有用。然而，40,000 个 div 听起来太多了，使用 canvas 或 SVG（例如，使用 KineticJS 库，因为它可以处理动画——变换、旋转、缩放等）可能会有更好的性能。

原文由 DF_ 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

虽然所有 3 个属性都使元素的框 看起来 不可见，但它们之间存在重要区别：

财产绘布局中堆叠上下文指针事件键盘事件opacity: 0;不是的新的是的是的visibility: hidden;不是的_变化_不不display: none;不不_变化_不不

• “已绘制”列指示浏览器是否将绘制元素的背景（例如 background-image ）、 #text 内容等。
  • 当然，如果不参与页面布局，就无法绘制元素。
  • 这对所有 3 个属性和值都是否，因为浏览器 不需要 绘制元素的框，因为它是不可见的。
• “In layout”列指示浏览器是否将计算元素的布局和尺寸 - 以及未排除在布局之外的任何后代。
  • 这仅适用于 --- display: none; ，与 opacity: 0; 和 visibility: hidden; ，浏览器仍然可以正确确定它相对于其他元素的布局大小当前元素（例如，如果您有 span.hidden { visibility: hidden; display: inline; } ）。
• “堆叠上下文”列表明任何使用 opacity （除了 opacity: 1.0; ）都会创建一个新的堆叠上下文，这会使 position 属性的使用复杂化
• “指针事件”列指示该元素是否会响应来自鼠标、触摸屏、手写笔等指针设备的用户交互。
  • eg with visibility: hidden; then the :hover state won’t work, and clicking the same element won’t apply :focus or :active either.
  • 此外，DOM 不会引发您在 JavaScript 中处理的任何指针事件（例如 visibility: hidden; 不会引发 mouseclick ， touchstart -b498 等 click 事件仍然可以由某些元素引发，例如 <button> 如果用户使用非指针输入方法调用，例如使用键盘或语音（可访问）导航方式。
    • 您可以使用 pointer-events: none; 来阻止指针事件，但这 不会阻止键盘和其他非指针输入，因此不应用于禁用元素，因为用户仍然可以使用键盘与其交互(especially <button> , <input /> , <select> , and <textarea> ).
• “键盘事件”列指示元素是否可以使用键盘导航（以及可能的其他导航方式）进行交互。
  • 这包括智能设备（智能手机和平板电脑）浏览器的“上一个/下一个字段”按钮，用于导航 <form> 元素（因为它使用 tabindex ）。
  • 与使用 pointer-events: none; 在 CSS 中禁用指针事件的方式不同，没有禁用键盘交互的 CSS 属性。

---

下表显示了这 3 个属性的主要值之间更完整的比较：

财产绘布局中堆叠上下文指针事件键盘事件动画化不透明度opacity: 0;不是的新的是的是的是的opacity: 0.1;是的是的新的是的是的是的opacity: 0.9;是的是的新的是的是的是的opacity: 1;是的是的变化是的是的是的能见度visibility: hidden;不是的_变化_不不是的，有警告visibility: visible;是的是的变化是的是的是的，有警告展示display: none;不不_变化_不不不display: contents;仅限文本和子项仅限文本和子项变化是的是的不其他pointer-events: none;不适用不适用不适用不是的不

• “Animatable”列指示该属性是否可以与 CSS 转换（ transition: ）或 CSS 动画（ @keyframes ）一起使用。

  • 至关重要的是， display: 属性 _不能被动画化_，这就是为什么我们不能使用 @keyframes 时间轴在动画完成后完全隐藏一个元素。
    • 但奇怪的是，我们 可以 为 visibility: 属性设置动画，尽管它是不连续的， 尽管有警告。

• 另外，不要被名称相似的 backface-visibility 和 content-visibility 属性混淆。

  • backface-visibility 仅适用于3D transform 操作。
  • content-visibility 是在初始页面加载期间加速页面渲染的优化，但首先需要 CSS Containment，这超出了此 QA 的范围。

原文由 Nishant 发布，翻译遵循 CC BY-SA 4.0 许可协议