当 Velocity JS 动画为运行时忽略点击事件

Question

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

如果动画运行如何忽略点击事件？

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

我也试过了 velocity.('stop', true) 但是这会停止动画并在最后一个位置重新开始它，如果我点击我的按钮 10 次它看起来像 "lag"。

那么这是我的代码：

$('#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 的内容...

您没有提供 "effect registration" 部分。
我在 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` 事件重新绑定到按钮。

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 中使用了它。
（持续时间最长）

当 Velocity JS 动画为运行时忽略点击事件

Ignore click event when Velocity JS animation is running

javascript

jquery

animation

velocity.js

当 Velocity JS 动画为 运行 时忽略点击事件

Ignore click event when Velocity JS animation is running

javascript

jquery

animation

velocity.js

当 Velocity JS 动画为运行时忽略点击事件