隐藏元素时是否禁用 CSS3 转换？

Question

我注意到（在 Chrome 43 中使用 jQuery）当元素具有 display: none 时，过渡将被禁用。这种在所有浏览器上的标准化行为是 jQuery 的一个特性，还是在生产中不能依赖的东西？

当要在延迟函数中更改要设置动画的 CSS 语句时，将启用转换。 Take a look at this JSFiddle。取消注释第 3 行或 6 自己看。

解决方案：

在生产中不能依赖此行为，因为它似乎是 optimization/design 选择的产物，而不是规范（根据@Andriy Horens 的回答）。相反，您应该使用 class 打开和关闭动画 (transition-property: none) 。未能使用 class 使它在 Chrome 43 中对我来说不可靠。Chrome 也需要单独的帧（延迟代码，超时为 0）来更新一些 CSS声明。如果您想节省开发时间，只需推迟与动画相关的任何事情。

Answer 1

根据MDN：

显示

In addition to the many different display box types, the value none lets you turn off the display of an element; when you use none, all descendant elements also have their display turned off. The document is rendered as though the element doesn't exist in the document tree.

所以我认为显示设置为 none 的元素根本不会在所有浏览器中呈现，因此不会应用过渡或任何其他视觉效果。

您也可以通过订阅transitionend活动来测试自己：

$(element).on("transitionend", function () {
     console.log("transition ended");
});

更新：

它也符合 w3c 规范：

And some values (such as display:none, display: contents, and box-suppress: discard) cause the element and/or its descendants to not generate any boxes at all.

其中框是元素的视觉表示。过渡绝对是视觉表示的一部分，因为它也会影响布局，例如当您更改元素的相对位置并应用过渡时。

这是另一个示例，说明具有 display : none 和 visibility : hidden 的元素的动画有何不同，换句话说，渲染元素和未渲染元素。

JSFiddle DEMO

隐藏元素时是否禁用 CSS3 转换？

Are CSS3 transitions disabled when element is hidden?

javascript

css

jquery

css-transitions

显示