88

我目前正在开始一个动画项目。在项目中，我将拥有超过 40000div秒并迭代地为它们设置动画。如果任何divs 处于被动状态（即至少 2 秒内没有动画），我不会显示它们以提高动画性能。

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

.passive1{
   display:none
}

.passive2{
    visibility:hidden;
}

.passive3{
    opacity:0;
}

以及如何测量渲染性能，如 fps、gpu 使用率？

4

8 回答 8

303

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

财产 绘 在布局中 堆叠上下文 指针事件 键盘事件
opacity: 0; 不 是的 新的 是的 是的
visibility: hidden; 不 是的 变化 不 不
display: none; 不 不 变化 不 不
  • “Painted”列指示浏览器是否将绘制元素的背景（例如background-image）、#text内容等。
    • 当然，如果不参与页面布局，则无法绘制元素。
    • 这对于所有 3 个属性和值都是否，因为浏览器不需要绘制元素的框，因为它是不可见的。
  • “布局中”列指示浏览器是否将计算元素的布局和尺寸 - 以及它的任何未从布局中排除的后代。
    • 这只是No for display: none;，与浏览器一样，opacity: 0;浏览visibility: hidden;器仍将确定元素的大小，因此它可以正确地布局相对于当前元素的其他元素（例如，如果您有span.hidden { visibility: hidden; display: inline; }）。
  • “堆叠上下文”列表示任何使用opacity(except opacity: 1.0;) 都会创建一个新的堆叠上下文，这会使position属性的使用变得复杂。
  • “指针事件”列指示元素是否会响应来自指针设备（例如鼠标、触摸屏、触控笔等）的用户交互。
    • 例如，visibility: hidden;然后:hover状态将不起作用，并且单击相同的元素将不适用:focus，或者:active两者都不适用。
    • 此外，DOM 不会引发您在 JavaScript 中处理的任何指针事件（例如visibility: hidden;不会引发mouseclick,touchstart等 - 请注意，click某些元素仍然可以引发事件，例如<button>用户使用非指针调用时输入法，例如用键盘或语音（无障碍）导航方式。
      • 您可以使用pointer-events: none;来阻止指针事件，但这不会阻止键盘和其他非指针输入，因此不应该用于禁用元素，因为用户仍然可以使用键盘与其交互（尤其是<button>、<input />、<select>和<textarea>） .
  • “键盘事件”列指示元素是否可以使用键盘导航（以及可能的其他导航方式）进行交互。
    • <form>这包括用于导航元素的智能设备（智能手机和平板电脑）浏览器的“上一个/下一个字段”按钮（因为它使用tabindex）。
    • 与如何在 CSS 中使用 禁用指针事件不同pointer-events: none;，没有 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属性混淆。

于 2015-12-30T12:29:41.333 回答
17

在这里找到的答案将回答您的第一个问题（很可能display:none是因为空间完全折叠了）。

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

于 2013-02-06T14:13:46.140 回答
9

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

于 2016-10-21T16:39:01.347 回答
7

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

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

  1. 折叠元素通常占用的空间
  2. 响应事件（例如，点击、按键）
  3. 参与标签
                     折叠事件标签
不透明度：0 否 是 是
可见性：隐藏 否 否 否
可见性：折叠 * 否 否
显示：无 是 否 否

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

从链接获得

于 2020-06-09T11:22:01.367 回答
6

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

于 2013-02-06T14:14:27.763 回答
4

display:none因为 div 被从流中取出，因此不必计算它们的位置。

话虽如此，40000 divs 听起来很疯狂。您是否考虑过 HTML5 画布或 SVG 之类的替代方案？

于 2013-02-06T14:10:18.703 回答
1

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

例如

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

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

在屏幕上悬停状态/元素：

visibility:visible;
opacity:1;
于 2018-06-05T17:20:55.993 回答
0

在调查悬停时发现了这个线程：Safari mobile 中的错误

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

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

如此烦人，因为在我尝试过的所有其他浏览器中都可以正常工作。

于 2021-06-20T10:13:58.227 回答