javascript - Velocity JS动画运行时忽略点击事件

Question

我正在使用 Velocity JS，但是当我单击一个触发动画的按钮时，如果我单击该按钮 10 次，动画将重复 10 次。

如果动画正在运行，如何可以忽略点击事件？

我尝试了 event.stopPropagation 和 event.preventDefault 但没有效果。

我也尝试过 velocity.('stop', true) 但这会停止动画并在最后一个位置重新启动它，如果我点击我的鼠标 10 次，它看起来会像“滞后”按钮。

然后这是我的代码:

$('#btn_animate').on('click', function(e){

    divs.velocity('transition.flipXOut',
        {
            duration :500,
            complete: function() {
                $('#box2').velocity('transition.flipXIn', {duration :800})
            }
        })

});

如何避免 Velocity JS 动画运行时的点击事件？

Answer 1

我必须阅读一些有关 Velocity 的内容...

您没有提供“生效注册”部分。
我把它放在Velocity examples中

$.Velocity
    .RegisterEffect("transition.flipXIn", {
        defaultDuration: 700,
        calls: [
            [ { opacity: 1, rotateY: [ 0, -55 ] } ]
        ]
    });
$.Velocity
    .RegisterEffect("transition.flipXOut", {
        defaultDuration: 700,
        calls: [
            [ { opacity: 0, rotateY: 55 } ]
        ],
        reset: { rotateY: 0 }
    });

现在，让我们定义一个名为“theEffect”的函数。
这个函数的作用是:

• 解除按钮的点击事件
• 制作动画
• 执行动画回调(这是另一个动画)
• 将“click”事件重新绑定(bind)到第二个动画回调中的按钮。

var theEffect = function(){
    console.log("UNBINDING click events from the button");
    $('#btn_animate').unbind("click");

    $('#box2').velocity('transition.flipXOut',{
        duration:500,
        complete: function() {
            $('#box2').velocity('transition.flipXIn', {
                duration:800,
                complete: function() {
                    console.log("BINDING click events to the button");
                    $('#btn_animate').bind("click",theEffect);
                }
            });
        }
    });
}
// Initial binding
$('#btn_animate').bind("click",theEffect);

我让它在 this CodePen 中工作.
(持续时间最长)