将其添加到DOM之后，触发过渡动画

Question

我正在尝试向DOM添加一个元素，然后添加新类以触发过渡动画。

// -- 1 -- Circle Already is in the DOM
// <div class="circle circle1 hwaccel"></div>
$('.circle1').addClass("dropped"); // Works!
// -- 2 -- Circle is added to the DOM with jQuery
var $c = $('<div class="circle circle2 hwaccel"></div>').appendTo( $('body') );
$c.addClass("dropped");
// Doesn't animate. Also tried $c.toggleClass("dropped");
// -- 3 -- Circle is added to the DOM with vanilla JS
var circleClass = "circle circle3 hwaccel";
var circleElt = document.createElement("div");
circleElt.setAttribute("class", circleClass);
document.body.appendChild( circleElt );
circleElt.setAttribute("class", circleClass + " dropped");
// Doesn't animate. :(

我在做什么错？小提琴在这里：http：//jsfiddle.net/luken/dslhj/

Answer 1

某人必须与适当的术语大声疾呼，以解释为什么有必要，但我可以解释您需要做什么。

您无法在相同的操作中添加并应用样式。浏览器需要单独应用"开始"类，"终结类"。最简单的修复方法是包装在settimeout中添加类。

所以更改此信息：

var $c = $('<div class="circle circle2 hwaccel"></div>').appendTo( $('body') );
$c.addClass("dropped");

：

var $c = $('<div class="circle circle2 hwaccel"></div>').appendTo( $('body') );
setTimeout(function(){
    $c.addClass("dropped");}
,0)

Settimeout补充说，将其添加到DOM，然后更改类别（同样，具有更多JS知识的人都必须使用适当的技术说明来介绍有关其为什么有效的适当的技术解释）。