2

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

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

当要显示覆盖时，将删除 hiddenElement 类，并添加另一个类“初始化”，该类将元素不透明度设置为 0.6。

我期望发生的是让元素平滑地动画化，这在 Opera 中确实发生了，但在 Firefox 和 chrome 中它并不能完全那样工作。

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

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

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

4

1 回答 1

2

我遇到了各种各样的问题。这是 CSS3 过渡规范中一个非常糟糕的部分，因为规范没有说明这种行为。

可预测的方法是：

  1. 设置对象的初始状态。
  2. 在对象上设置与过渡相关的 CSS3。
  3. 对象不能display: none在这一点上。
  4. 让浏览器返回事件循环并重新绘制任何需要重新绘制以建立动画前状态的内容。
  5. 然后在对象中添加一个类来设置最终状态并触发动画。
  6. 返回浏览器事件循环以使动画发生。

不可预知的方法是：

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

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

Your example shows this type of thing. You could make it work without the setTimeout by having your initial state be opacity: 0; instead of display: none;, though I realize that may not be what you want. Then, the initial state (without display: none) would be seen by the browser before you establish the final state and the transition should work.

于 2011-07-14T21:46:46.347 回答