使用 Jquery 和 '.css' 的 CSS 动画答案

【问题标题】：CSS Animation using Jquery and '.css'使用 Jquery 和 '.css' 的 CSS 动画
【发布时间】：2015-06-09 07:12:59
【问题描述】：

所以我有一段代码。目的是在 click 时播放来自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>

我想在每次点击时为文本设置动画。

【问题讨论】：

发布你的 HTML，或者做一个 jsfiddle
可能是因为你没有在动画结束后移除动画属性
嘿，谢谢，我正在制作一个 jsfiddle。但是动画结束后如何移除动画属性呢？
对我来说一个更好的主意似乎是添加和删除一个类并重新添加它。
感谢@BramVanroy 的建议，但上述方法似乎工作得很好。你说是为了表现？

标签： javascript jquery html css animation

【解决方案1】：

如果您在当前动画完成后不删除动画类，则动画第二次将无法运行。

但是动画结束后如何移除动画属性呢？

这是一个sn-p：

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函数即可，如下：

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

在你的情况下，你说你正在使用 animate.css 库：

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

现场示例：jsFiddle

【讨论】：

【解决方案2】：

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

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

【讨论】：

你就是男人！完全理解我的错误。结案。谢谢你，祝你有美好的一天。 :)