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的变量。所以当锤子检测到滑动时，它会检查变量以查看动画当前是否正在运行。

这是代码的简化形式

Cr

Hammer.js和jQuery混淆了类

1 个答案: