Hammer.js и jQuery запутанные классы

Question

Я пытаюсь создать веб-приложение, которое будет работать на моем телефоне. Я использую библиотеку Hammer.js для распознавания сенсорных жестов и animate.css для анимации. Я использую swipeleft а также swiperight распознаватели касания, чтобы изменить классы определенных div элементы. Однако, когда я использую swiperight а потом swipeleft (при тестировании на chrome или на моем iphone) классы перепутаны, а элементы находятся в неправильном положении.

Вот часть моего кода

index.html

<div class="container" id="app">
    <div class="row">
        <div class="col-xs-10 co-xs-offset-1 col-md-4 app_card active_app_card animated id="app2">
            <!-- More code -->
        </div>
        <div class="col-xs-10 co-xs-offset-1 col-md-4 app_card animated id="app1">
            <!-- More code -->
        </div>
        <div class="col-xs-10 co-xs-offset-1 col-md-4 app_card animated id="app3">
            <!-- More code -->
        </div>
    </div>
</div>

stylesheet.css

 .app_card {
      position: absolute;
      right: -100%;
 }

 .active_app_card {
     right: auto;
     left: auto;
 }

main.js

$(function() {
var app1 = document.getElementById("app1");
var app2 = document.getElementById("app2");
var app3 = document.getElementById("app3");

Hammer(app1).on("swipeleft", function() {
    console.log("app1 left");
    $("#app1").addClass("slideOutLeft");
    $("#app2").addClass("bounceInRight active_app_card").one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
        $("#app1").removeClass("slideOutLeft active_app_card");
        $("#app2").removeClass("bounceInRight");
    });
});

Hammer(app2).on("swiperight", function() {
    console.log("app2 right");
    $("#app2").addClass("slideOutRight");
    $("#app1").addClass("bounceInLeft active_app_card").one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
        $("#app2").removeClass("slideOutRight active_app_card");
        $("#app1").removeClass("bounceInLeft").addClass("active_app_card");
    });
});

Проблема в том, когда я провожу пальцем вправо, когда app2 на экране, а затем проведите пальцем влево, когда app1 на экране, анимация работает и app2 появляется на экране, но как только анимация заканчивается, app2 исчезает и app1 возвращается. если я снова проведу влево, app2 появляется на экране правильно. В любом случае, чтобы остановиться app1 появляется, когда я отмахиваюсь от него?

Answer 1

Кажется, я решил эту проблему, не запуская новую анимацию до окончания текущей. Я уже много раз менял код, поэтому не могу опубликовать точный код снова (это, вероятно, вызовет некоторую путаницу). По сути, я установил переменную true во время работы анимации. поэтому, когда молоток обнаружит удар, он проверит переменную, чтобы увидеть, запущена ли анимация в данный момент или нет.

вот упрощенная форма кода

window.animating = true;

Hammer(app).on("swiperight", function() {
    if ( window.animating === true ) {
        console.log("animation currently running");
    } else {
        //next animation code
    }
}