jquery - 阻止新的 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。