不为新添加的元素设置动画的原因是浏览器对回流进行批处理。

添加元素时，需要回流。这同样适用于添加类。但是，当您在单个 javascript 回合中同时执行这两项操作时，浏览器会抓住机会优化第一个。在这种情况下，只有一个（同时是初始和最终）样式值，所以不会发生转换。

该setTimeout技巧有效，因为它延迟了将类添加到另一轮 javascript 中，因此渲染引擎需要计算两个值，因为存在时间点，当第一个值呈现给用户时。

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

这确实是极少数情况之一，这种行为是可取的。大多数情况下，在 DOM 修改之间访问导致回流的属性会导致严重的减速。

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

使用jQuery试试这个（这里有一个例子。）：

var $a = $('<div>')
.addClass('box a')
.appendTo('#wrapper');
$a.css('opacity'); // added
$a.addClass('in');

使用 Vanilla javaScript 试试这个：

var e = document.createElement('div');
e.className = 'box e';
document.getElementById('wrapper').appendChild(e);
window.getComputedStyle(e).opacity; // added
e.className += ' in';

简要思路：

该的getComputedStyle（）刷新所有悬而未决的风格变化，迫使布局引擎来计算元素的当前状态，因此 的.css（）的工作原理类似的方式。

关于css()来自jQuery网站：

.css() 方法是一种从第一个匹配元素获取样式属性的便捷方法，特别是考虑到浏览器访问大多数这些属性的不同方式（基于标准的浏览器中的getComputedStyle () 方法与currentStyle和 runtimeStyle Internet Explorer 中的属性）以及浏览器对某些属性使用的不同术语。

您可以使用getComputedStyle()/css()代替setTimeout。您也可以阅读本文以获取一些详细信息和示例。

请使用下面的代码，使用“focus()”

查询

var $a = $('<div>')
    .addClass('box a')
    .appendTo('#wrapper');
$a.focus(); // focus Added
$a.addClass('in');

Javascript

var e = document.createElement('div');
e.className = 'box e';
document.getElementById('wrapper').appendChild(e).focus(); // focus Added
e.className += ' in';

@Frizi 的解决方案有效，但有时我发现getComputedStyle当我更改元素的某些属性时它不起作用。如果这不起作用，您可以尝试getBoundingClientRect()如下，我发现它是防弹的：

假设我们有一个元素el，在这我们要转型opacity，但是el是display:none; opacity: 0：

el.style.display = 'block';
el.style.transition = 'opacity .5s linear';

// reflow
el.getBoundingClientRect();

// it transitions!
el.style.opacity = 1;

我更喜欢 requestAnimationFrame + setTimeout（见这篇文章）。

const child = document.createElement("div");
child.style.backgroundColor = "blue";
child.style.width = "100px";
child.style.height = "100px";
child.style.transition = "1s";

parent.appendChild(child);

requestAnimationFrame(() =>
  setTimeout(() => {
    child.style.width = "200px";
  })
);

在这里试试。