CSS 3过渡与不透明度- Chrome和Firefox

CSS 3 Transitions with Opacity - Chrome and Firefox

本文关键字：Chrome Firefox 不透明度 CSS      更新时间：2023-09-26

当我遇到一个奇怪的问题时，我一直在使用CSS3过渡来渐变叠加div。

基本上我有一个div元素，在它的id上设置了样式-即background-color: #000，不透明度:0等。以及浏览器特定的过渡样式。默认情况下，叠加元素上有一个"hiddenElement"类，将其显示设置为none。

当叠加要显示时，hiddenElement类被移除，另一个类被添加"initialized"，这个类将元素的不透明度设置为0.6。

我所期望的是元素能够流畅地动画化，这在Opera中确实可以实现，但在firefox和chrome中却不完全是这样。

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

正如你所看到的，当"addClass(' initialized ')"被包裹在setTimeout()中，即使在chrome中有0毫秒的超时，它也能正确地动画。只是在超时之外做addClass，不会做动画。在firefox中，超时时间必须更长——50ms。在歌剧中，这很管用。

这可能是由于UI/Javascript争夺单线程，但我只是好奇是否有人有过类似的经历。

我遇到过各种各样的问题。这是CSS3过渡规范中非常糟糕的一部分，因为规范中对这种行为没有任何规定。

可预测的方法是:

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

不可预测的方法是:

  1. 任何涉及显示的内容:在任何状态下都没有。
  2. 设置初始状态和CSS3转换规则
  3. 设置最终状态，不让浏览器返回事件循环。
  4. 返回事件循环(通常情况下CSS3的过渡不会进行)。

我看到了能够在不触发CSS3过渡的情况下立即以编程方式改变一大堆属性的价值。但是，通常情况下，您希望用一堆代码建立初始状态，以编程方式设置您想要发生的转换，然后在一段代码中设置最终状态。今天，你不能这样做，并获得可靠的行为。您必须在中间插入一些setTimeout调用。最好有一个同步函数调用来设置初始状态，它会对浏览器说:好，我正在设置这个对象的初始状态。从现在起，我所做的任何改变，我希望你包括在我已经设置的CSS3过渡。这样，你就不需要额外的setTimeout了。

你的例子展示了这类事情。你可以使它工作没有setTimeout通过让你的初始状态是opacity: 0;而不是display: none;，虽然我意识到这可能不是你想要的。然后，在您建立最终状态之前，浏览器将看到初始状态(没有display: none)，并且转换应该工作。

相关文章：