jquery - 使用 jQuery .appendTo 后执行 CSS3 动画

Question

我想使用 .appendTo() 修改元素的 DOM 位置。完成后，我需要使用 CSS3 为元素设置动画。

元素不会动画，而是捕捉到新的 CSS 样式。

JavaScript:

$(".run").click(function() {
    $(".imageOriginal").appendTo(".insert").toggleClass("imageAnimated");   
});

HTML:

<div class="insert"> </div>
<img src="img/img1.png" class="imageOriginal"/>

CSS:

.imageOriginal {
    -webkit-transform: scale(0.1);
}
.imageAnimated {
    -webkit-transition: all 1s ease-in-out;    
    -webkit-transform: scale(1);
}

我将 .appendTo() 和 .toggleClass() 方法分开，以触发两个不同的点击事件。这种方法有效(但显然不是所希望的)。我也尝试在附加后使用 .delay(1000) ，但这也不起作用。

Answer 1

问题是您要附加内容，然后同时切换类。如果你删除 .appendTo() 调用它工作正常:

$(".imageOriginal").toggleClass("imageAnimated");

这是一个演示:http://jsfiddle.net/38FrD/1/

我不太确定发生了什么，但是如果您在 FireBug 中观察图像元素，您可以看到添加的 transition 属性的持续时间为 0s即使指定了持续时间。

此外，.delay() 仅适用于队列(如 .animate() 调用)。

更新

如果您将 .toggleClass() 调用放在 setTimeout 匿名函数中，那么它似乎可以正常工作:

$(".run").click(function() {
    var $this = $(".imageOriginal");
    $this.appendTo('.insert');
    setTimeout(function () {
        $this.toggleClass("imageAnimated");
    }, 0);
});

这是一个演示:http://jsfiddle.net/38FrD/2/