Пользовательская функция для 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 работает только до сих пор.

Вся документация по анимации находится здесь, и вот один простой пример отказов:

.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. Надеюсь это поможет!