我正在尝试向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/
答案 0 :(得分:1)
有人必须说出正确的术语来解释为什么这是必要的,但我可以解释你需要做什么。
您无法在同一操作中添加和应用该样式。浏览器需要启动&#39;班级和最终班级&#39;单独申请。最简单的解决方法是将类的添加包装在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添加&#39; disconnect&#39;将它添加到dom,然后更改类的行为之间(再次,具有更多JS知识的人将不得不使用适当的技术解释来说明为什么这样做)。