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

Question

我在做什么：

我正在使用一个名为 Transit 的 jQuery 插件来处理响应式幻灯片中的一些 3D 动画。

问题：

在您快速点击“下一个”或“上一个”之前 - 在动画完成之前，一切都很好。我见过一些类似的问题，但由于这些技术上的 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。