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 演示页面链接上所做的事情。希望这可以帮助！