在使用jQuery .appendTo之后执行CSS3动画 [英] perform CSS3 animation after using jQuery .appendTo

问题描述

我想使用 .appendTo（）来修改元素的DOM位置。一旦这完成我需要使用CSS3动画元素。

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

JavaScript：

  $（。run）。 （function（）{
 $（imageOriginal）。appendTo（。insert）。toggleClass（imageAnimated）; 
}）; 
  

HTML：

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

CSS：

 code> .imageOriginal {
 -webkit-transform：scale（0.1）; 
} 
 .imageAnimated {
 -webkit-transition：all 1s ease-in-out; 
 -webkit-transform：scale（1）; 
} 
  

我分开了 .appendTo code>和 .toggleClass（）方法来触发两个不同的点击事件。这种方法工作（但显然不是所希望的）。我也尝试在追加后使用 .delay（1000），但这也不工作。

解决方案

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

  $（。imageOriginal）。toggleClass（imageAnimated）; 
  

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

我不知道发生了什么，但如果您在FireBug中观看image元素，您可以看到添加的 transition 属性的持续时间为 0s ，即使 c>

.animate（）调用）。

UPDATE

如果你把 .toggleClass（）调用放在 setTimeout 匿名函数中，

  $（。run）。click（function（）{
 var $ this = $（。 imageOriginal）; 
 $ this.appendTo（'。insert'）; 
 setTimeout（function（）{
 $ this.toggleClass（imageAnimated）; 
}，0 ）; 
}）; 
  

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

I want to use .appendTo() to modify the DOM position of an element. Once this is complete I need to animate the element with CSS3.

The element will not animate, instead it snaps to the new CSS style.

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);
}

I separated the the .appendTo() and the .toggleClass() methods to fire on two different click events. This method works (but obviously isn't desired). I also tried using .delay(1000) after the append, but this doesn't work either.

解决方案

The issue is that you are appending the content and then toggling the class at the same time. If you remove the .appendTo() call it works fine:

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

Here is a demo: http://jsfiddle.net/38FrD/1/

I'm not really sure what is happening but if you watch the image element in FireBug you can see that the transition property that gets added has a duration of 0s even though a duration was specified.

Also .delay() only works for queues (like .animate() calls).

UPDATE

If you place the .toggleClass() call inside a setTimeout anonymous function then it appears to work as desired:

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

Here is a demo: http://jsfiddle.net/38FrD/2/

这篇关于在使用jQuery .appendTo之后执行CSS3动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！