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

Question

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

在延迟函数中更改要设置动画的CSS语句时,将启用转换.看看这个JSFiddle.取消注释第3行或第 6行以自行查看.

---

解:

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

Answer 1

根据MDN：

展示

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

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

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

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

更新：

它也符合w3c规范：

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

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

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

JSFiddle 演示