CSS 3与不透明度的转换 - Chrome和Firefox

Question

我一直在玩CSS3转换以淡入覆盖div，当我遇到了一个奇怪的问题时。

基本上我有一个div元素，它的样式设置为id - 即background-color：＃000，opacity：0等。以及浏览器特定的转换样式。默认情况下，overlay元素上有一个“hiddenElement”类，将其设置为none。

当要显示叠加层时，hiddenElement类将被删除，而另一个类将添加“初始化”类，此类将元素不透明度设置为0.6。

我期望发生的事情是元素能够流畅地动画，这在Opera中发生，但是在firefox和chrome中它并不像那样工作。

我在这里构建了一个独立的案例：http://jsbin.com/obojet/27/。你可以看到，当“addClass（'Initialised'）”包含在setTimeout（）中时，即使在chrome中超时时间为0ms，它也可以正确地进行动画处理。只是在超时之外做addClass，不会做动画。在Firefox中，超时时间必须更长 - 50ms。在歌剧中它只是起作用。

这可能是UI/Javascript竞争单线程，但我只是好奇是否有其他人遇到类似的问题。

Answer 1

我遇到过各种各样的问题。这是CSS3转换规范中非常糟糕的一部分，因为规范没有提到这种类型的行为。

可预测的方式来做到这一点是：

1. 设置对象的初始状态。
2. 在对象上设置与转换相关的CSS3。
3. 此时，对象不得为display: none。
4. 让浏览器返回到事件循环并重绘任何需要重绘以建立预动画状态的内容。
5. 然后向设置最终状态并触发动画的对象添加一个类。
6. 返回浏览器事件循环以进行动画。

不可预知的方式做到这一点是：

1. 任何涉及显示：没有在任何状态。
2. 设置初始状态和CSS3转换规则
3. 设置最终状态而不让浏览器返回到事件循环。
4. 回到事件循环（通常情况下，CSS3转换不会进行）。

我看到能够以编程方式一次更改一大堆属性的价值，而不触发CSS3转换的开始。但是，你想用一堆代码来建立初始状态并不罕见，以编程方式设置你想要发生的转换，然后在一段代码中设置最终状态。今天，你不能这样做，并获得可靠的行为。你将不得不在中间插入一些setTimeout调用。如果有一个同步函数调用来设置对浏览器的初始状态，那么最好的办法是：我正在设置这个对象的初始状态。我从现在开始做出的任何更改，我希望您包含在我设置的CSS3转换中。然后，你不需要额外的setTimeout无意义。

你的例子显示了这种类型的东西。你可以通过让你的初始状态为opacity: 0;而不是display: none;来让它在没有setTimeout的情况下工作，尽管我意识到这可能不是你想要的。然后，在建立最终状态并且转换应该工作之前，浏览器会看到初始状态（不显示：无）。