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

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

1 个答案: