Question

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

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

SOLUTION：

这种行为不能在生产中依赖，因为它似乎是优化/设计选择而非规范的产物（根据@Andriy Horens的回答）。相反，您应该使用类打开和关闭动画（transition-property: none）。没有使用类使得它在Chrome 43中对我来说不可靠.Chrome也需要单独的帧（将代码推迟超时为0）来更新一些CSS语句。如果您想节省开发时间，只需推迟与动画相关的任何内容。

Answer 1

根据MDN：

显示

除了许多不同的显示框类型之外，值无可让您关闭元素的显示;当您使用无时，所有后代元素的显示都会关闭。文档的呈现方式就好像元素不存在于文档树中一样。

所以我认为显示设置为无的元素将不会在所有浏览器中呈现，因此转换或任何其他视觉效果都不会被应用。

您还可以订阅transitionend事件来测试自己：

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

<强>更新

它也符合w3c规范：

某些值（例如display：none，display：contents和box-suppress：discard）会导致元素和/或其后代根本不生成任何框。

框是元素的直观表示。过渡肯定是视觉表现的一部分，因为它也会影响布局，例如当您更改应用了过渡的元素的相对位置时。

以下是另一个示例，其中包含display : none和visibility : hidden的元素动画的不同之处，换句话说是渲染元素和未渲染元素的动画。

JSFiddle DEMO

隐藏元素时是否禁用CSS3过渡？

1 个答案:

显示