不透明的 CSS 3 过渡 - Chrome 和 Firefox

Question

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

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

当要显示叠加层时，hiddenElement 类被移除，并添加另一个类“Initialised”，该类将元素不透明度设置为 0.6。

我期望发生的事情是让元素平滑地进行动画处理，这在 Opera 中确实发生了，但在 firefox 和 chrome 中却不是这样。

我在这里建立了一个独立的案例：http://jsbin.com/obojet/27/。

正如您所看到的，当“addClass('Initialised')”被包装在 setTimeout() 中时，即使在 chrome 中超时为 0 毫秒，它也能正确动画。只是在超时之外做 addClass，不会做动画。在 Firefox 中，超时时间必须更长 - 50 毫秒。在歌剧中它只是工作。

这可能归结为 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 的情况下工作，尽管我意识到这可能不是您想要的。然后，在您建立最终状态之前，浏览器会看到初始状态（不显示：无），并且转换应该可以工作。