Hammer.js 和 jQuery 混淆类

Question

我正在尝试制作一个可以运行在我的 phone 上的网络应用程序。我正在使用 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

我似乎通过在当前结束之前不开始新动画来解决这个问题。我已经对代码做了很多更改，所以我不能再 post 确切的代码（这可能会引起一些混乱）。基本上我所做的是设置一个变量，该变量在动画为运行时为真。所以当 hammer 检测到滑动时，它会检查变量以查看动画当前是否为运行。

这里是代码的简化形式

window.animating = true;

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

Hammer.js 和 jQuery 混淆类

Hammer.js and jQuery confusing classes

javascript

jquery

css

hammer.js

animate.css

Hammer.js 和 jQuery 混淆 类

Hammer.js and jQuery confusing classes

javascript

jquery

css

hammer.js

animate.css

Hammer.js 和 jQuery 混淆类