使用Jquery和'.css'的CSS動畫

Question

所以我有一段代碼。目的是從Animate.css播放選定的動畫點擊。

代碼

$(".container>parent").click(function() { 
    $('.element').css({ 
     'animation': 'fadeInUp .2s', 
     '-webkit-animation': 'fadeInUp .2s' 
    }); 
    }); 

問題

動畫運行，但只有一次。 '無限'屬性導致混亂：P

我還能做些什麼，每次有人點擊它時播放該動畫？

謝謝你的時間。

我的HTML：

  <span class="parent"> 
       <img src="assets/myimage.png" class="filter-image"> 
       <span class="element">Text</span> 
      </span> 

我想動畫文字每次我點擊它。

Answer 1

$(".container>parent").click(function() { 
    $('.element').css({ 
     'animation': 'fadeInUp .2s', 
     '-webkit-animation': 'fadeInUp .2s' 
    }); 

    setTimeout(function(){ 
     $('.element').removeAttr('style'); 
    },300); 
}); 

Answer 2

如果您在當前動畫完成後未移除動畫類，則動畫將無法再次運行。

但是如何在動畫結束後刪除動畫屬性？

這裏有一個片段：

var support = {}; 
support.animation = (function() { 
    var animationEnd = (function() { 
     var element = document.body || document.documentElement, 
      animEndEventNames = { 
       WebkitAnimation : 'webkitAnimationEnd', 
       MozAnimation : 'animationend', 
       OAnimation  : 'oAnimationEnd oanimationend', 
       animation  : 'animationend' 
      }, name; 

     for (name in animEndEventNames) { 
      if (element.style[name] !== undefined) return animEndEventNames[name]; 
     } 
    }()); 

    return animationEnd ? { end: animationEnd } : false; 
})(); 



function animate(elem, cls, callback) { 
    var $elem = $(elem); 

    var onEndCallbackFn = function(ev) { 
     if (support.animation) { 
      $elem.removeClass(cls); 
      this.removeEventListener(support.animation.end, onEndCallbackFn); 
     } 

     if (callback && typeof callback === 'function') { callback.call(this, ev); } 
    }; 

    if (support.animation) { 
     $elem.addClass(cls); 
     $elem[0].addEventListener(support.animation.end, onEndCallbackFn); 
    } else { 
     onEndCallbackFn(); 
    } 
} 

用法很簡單，只需要調用動畫功能，如：

animate($('.selector'), 'classWithAnimation', callbackFn); 

在你的情況下，你說你正在使用animate.css庫：

$(".container>parent").click(function() { 
    animate($('.element'), 'animated fadeInUp', function() { 
     console.log('animation complete'); 
    ); 
}); 

現場示例：jsFiddle