javascript - animate.css 的自定义函数导致问题

Question

我正在为我的元素使用 animate.css 库。我认为创建一个 jQuery 函数来为我完成大部分工作会更容易。这是函数:

$(function () {    
    $.fn.extend({
        animateCss: function (animationName, callback) {
            var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
            this.addClass('animated ' + animationName).one(animationEnd, function () {
                $(this).removeClass('animated ' + animationName);
                if(callback){
                    callback();
                };
            });
        }
    });

});

它有效，我可以从 jQuery 对象调用它。问题是，当我从一个对象传入回调函数时，它会被调用，但是当另一个对象在不传入回调的情况下调用该函数时，该对象中的同一函数会再次被调用。

我不太确定这是怎么发生的，我有 Java 背景。有什么方法可以让这个函数保留为其他对象传入的回调变量吗？

Answer 1

这是一个例子，我在这里使用了最低限度的内容，但是 css3 的美妙之处在于它不需要 javascript 来运行，只需要浏览器来解释它；因此 css3 只能在很早以前工作。

All the animation documentation is here ，这是一个简单的反弹示例:

.title-large {
  font-size: 48px;
  }

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="bounce animated title-large">Animate me</div>

我的猜测是您无法访问 html 或者想要动态添加不同的动画？无论哪种方式，你都可以添加任何你想要的类，并在动画完成后删除它们，我认为这就是他们在上面的 github 演示页面链接上所做的事情。希望这可以帮助!