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

Question

当我遇到一个奇怪的问题时，我一直在玩CSS3过渡以淡入重叠div。

基本上我有一个div元素，它的id设置了样式 - 即背景颜色：＃000，不透明度：0等。以及特定于浏览器的过渡样式。默认情况下，overlay元素上有一个“hiddenElement”类，将其显示为none。

当要显示叠加层时，将删除hiddenElement类，并添加另一个类“Initialised”，此类将元素不透明度设置为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，但我意识到这可能不是你想要的。然后，在建立最终状态之前，浏览器将看到初始状态（不显示：无），并且转换应该有效。