防止新的CSS3和jQuery的动画，直到前一个完成

Question

我在做什么：

我利用jQuery插件叫做Transit照顾一些3D动画的幻灯片响应。

问：

一切都很正常，直到你点击“下一步”或“上一个” quickly-动画完成之前。我已经看到了一些类似的问题，但答案似乎不适用于我，因为这些技术上的CSS动画。 如何禁用导航直到动画完成的能力？

我还应该注意到现在我正在使用按键，但是我也会在最终版本中点击按钮。所以即使有几种不同的方式来进行幻灯片演示，该方法也应该可以工作。

工作实施例>jsFiddle

剥去代码：

$(document).ready(function() { 

// Define the function to play forward 
function playForward() { 
    // Do Stuff 
} 

// Define the function to play reverse 
function playReverse() { 
    // Do Stuff 
} 

// Animate on keypress 
$(document).keydown(function (e) { 
    var keyCode = e.keyCode || e.which, 
     arrow = { 
      left: 37, 
      up: 38, 
      right: 39, 
      down: 40 
     }, $status = $('#status'); 

    switch (keyCode) { 
     case arrow.left: 
      playReverse(); 
      break; 
     case arrow.up: 
      // 
      break; 
     case arrow.right: 
      playForward(); 
      break; 
     case arrow.down: 
      // 
      break; 
    } 
}); 
}); 

Answer 1

设置一个变量来跟踪动画过程的。 当您在按键上触发动画时，将变量设置为true;

var isTransitioning = true; 

在播放函数的顶部添加这一行来检测它是否处于转换状态，如果它不执行该函数。

if (isTransitioning) { return false; } 

检测到转换How do I detect a transition end without a JavaScript library?的结束并将变量设置回false。