触发附加元素上的CSS转换 [英] Trigger CSS transition on appended element

问题描述

由于这个问题观察到，

例如，给定此CSS（前缀省略此处）：

For example, given this CSS (prefixes omitted here):

.box { 
  opacity: 0;
  transition: all 2s;
  background-color: red;
  height: 100px;
  width: 100px;
}

.box.in { opacity: 1; }

此元素的不透明度将立即设置为1：

The opacity of this element will be set immediately to 1:

// Does not animate
var $a = $('<div>')
    .addClass('box a')
    .appendTo('#wrapper');
$a.addClass('in');

我已经看到了触发转换以获得预期行为的几种方法：

I have seen several ways of triggering the transition to get the expected behaviour:

// Does animate
var $b = $('<div>')
    .addClass('box b')
    .appendTo('#wrapper');

setTimeout(function() {
    $('.b').addClass('in');
},0);

// Does animate
var $c = $('<div>')
    .addClass('box c')
    .appendTo('#wrapper');

$c[0]. offsetWidth = $c[0].offsetWidth
$c.addClass('in');

// Does animate
var $d = $('<div>')
    .addClass('box d')
    .appendTo('#wrapper');
$d.focus().addClass('in');

相同的方法适用于vanilla JS DOM操作 - 这不是jQuery特定的行为。

The same methods apply to vanilla JS DOM manipulation - this is not jQuery-specific behaviour.

编辑 - 我使用Chrome 35。

Edit - I am using Chrome 35.

JSFiddle (includes vanilla JS example).

• 为什么对附加元素的直接CSS动画被忽略？


• 这些方法的工作原理是什么？
，如果有，是首选解决方案？

• Why are immediate CSS animations on appended elements ignored?
• How and why do these methods work?
• Are there other ways of doing it
• Which, if any, is the preferred solution?

推荐答案

添加元素时，需要使用reflow。这同样适用于添加类。但是，如果您在单一JavaScript回合中同时使用，浏览器就会优化第一个。在这种情况下，只有单个（同时为初始和最终）样式值，因此不会发生转换。

When element is added, reflow is needed. The same applies to adding the class. However when you do both in single javascript round, browser takes its chance to optimize out the first one. In that case, there is only single (initial and final at the same time) style value, so no transition is going to happen.

setTimeout trick的作用，因为它延迟了类添加到另一个javascript回合，因此有两个值呈现给呈现引擎，需要计算，因为有时间点，当第一个

The setTimeout trick works, because it delays the class addition to another javascript round, so there are two values present to the rendering engine, that needs to be calculated, as there is point in time, when the first one is presented to the user.

批处理规则还有一个例外。浏览器需要计算立即值，如果你试图访问它。这些值之一是 offsetWidth 。当您访问它时，触发回流。另一个在实际显示期间单独完成。同样，我们有两个不同的样式值，所以我们可以及时插入它们。

There is another exception of the batching rule. Browser need to calculate the immediate value, if you are trying to access it. One of these values is offsetWidth. When you are accessing it, the reflow is triggered. Another one is done separately during the actual display. Again, we have two different style values, so we can interpolate them in time.

这是真的很少的场合，当这种行为是可取的。大多数时间访问DOM修改之间的回流引起的属性可能导致严重的减速。

This is really one of very few occasion, when this behaviour is desirable. Most of the time accessing the reflow-causing properties in between DOM modifications can cause serious slowdown.

首选解决方案可能因人而异，但对我来说，访问 offsetWidth （或 getComputedStyle（））是最好的。有些情况下，当 setTimeout 被触发时，两者之间没有样式重新计算。这是罕见的情况，大多在加载的网站，但它发生。然后你不会得到你的动画。通过访问任何计算的样式，您将强制浏览器实际计算它。

The preferred solution may vary from person to person, but for me, the access of offsetWidth (or getComputedStyle()) is the best. There are cases, when setTimeout is fired without styles recalculation in between. This is rare case, mostly on loaded sites, but it happens. Then you won't get your animation. By accessing any calculated style, you are forcing the browser to actually calculate it.

这篇关于触发附加元素上的CSS转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！