jquery - 如何在点击时重复 css3 动画？

Question

我创建了一个元素并在单击时切换了Class .anim，所以当它被添加时动画有效但当它被移除时动画显然不起作用。每次单击此元素时如何使它起作用？

$( "<div/>", {
   "class": "test",
   text: "Click me!",
   click : function(){
   $(this).toggleClass('anim');
      }    
}).appendTo( "body" );

http://jsfiddle.net/TomasRR/7jskthcm/15/

Answer 1

您只能为此使用 CSS3，使用 .test:not(:active) 选择器而不是 .anim:

CSS:

.test:not(:active) {
    animation-duration: .8s;  
    -webkit-animation-duration: .8s;

    animation-name: fadeIn;
    -webkit-animation-name: fadeIn; 

    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out; 
}

JS:

$( "<div/>", {
    "class": "test",
    text: "Click me!"    
})
.appendTo( "body" );

演示:http://jsfiddle.net/7jskthcm/20/