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

我注意到（在Chrome43中使用jQuery）当元素具有

display:none

时，转换被禁用。这是所有浏览器上的标准化行为，是jQuery的一个特性，还是生产中不能依赖的特性

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

---

解决方案：

这种行为在生产中不可依赖，因为它似乎是优化/设计选择的产物，而不是规范（根据@Andriy Horens的回答）。相反，您应该使用类打开和关闭动画（

transition属性：none

）。在Chrome43中，由于未能使用某个类，使其对我来说不可靠。Chrome也需要单独的框架（延迟代码超时0）来更新一些CSS语句。如果您想节省开发时间，只需延迟与动画相关的任何内容。

根据：

展示 除了许多不同的显示框类型外，值none允许您关闭元素的显示；使用none时，所有子体元素的显示也将关闭。文档被呈现为文档树中不存在该元素

因此，我认为display设置为none的元素不会在所有浏览器中呈现，因此不会应用转换或任何其他视觉效果

您还可以通过订阅

transitionend

事件来测试自己：

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

---

更新：

也符合规范要求：

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

其中，框是元素的可视表示形式。过渡肯定是视觉表现的一部分，因为它也会影响布局，例如，当您在应用过渡的情况下更改元素的相对位置时

---

下面是另一个示例，演示了元素的动画与

显示：无

和

可见性：隐藏

的区别，换句话说，是渲染元素和未渲染元素

---

在safari 6中遇到了类似的情况。如果看不到转换，如何知道转换是否被禁用？@ExplosionPills请看一下JSFIDLE。如果您取消注释第6行，它将立即设置

不透明度：1

，而不进行任何转换。使用Chrome 43时不会发生这种情况。如果我只是取消注释第6行，它仍然会在中设置框的动画。更有趣的是，在属性更改的同一帧中，

display

从

none

更改时，将禁用转换。换句话说，尽可能节省资源的浏览器将像这样工作。但没有标准规定这是过渡的行为方式。您确定

transitionstart

事件吗？是的，我在Chrome 43上，没有控制台输出（如预期的那样），但是，如果您尝试将

显示：无

更改为

可见性：隐藏

，您仍将有隐藏元素，但所有转换都将应用。当元素从

不透明度

0转换为

1

时，事件不应该触发吗？嗯，有趣的是，

转换

事件检查你自己-好的，最后一次更新，这表示没有标准的

transitionstart

事件，不包括仅由IE10+实现的事件，并且

transitionend

是一个你应该使用的事件，因为它是w3c transition spec的一部分。