Question

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

如果动画正在运行，如何忽略click事件？

我尝试了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 ......

您没有提供＆＃34;效果注册＆＃34;一部分。
我把它放在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 }
    });

现在，让我们定义一个函数，该函数调用＆＃34; theEffect＆＃34;。
这个功能确实：

从按钮
做动画
做动画回调（这是另一个动画）
将“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动画运行时忽略单击事件

1 个答案: