Question

Commuity，

我目前正在撰写的特定代码片段存在问题。问题是我想委托动画。（例如，我有3个对象，第一个是动画，之后是第二个，之后是第三个）

重点是我试图让它模块化，所以我不能在那里硬编码。

一开始我们有以下情况：

parentDiv 应包含您想要“淡化”的对象

prevDiv 是最近“fadedIn”的对象

onclickDisabled 是暂时删除“点击”活动的类

fadeInAnim 是触发所需动画的类

function prepareChildrenForFadeInAnimation(parentDiv, prevId){
    var object = 0;
    parentDiv.children().each(function(){
        $(this).addClass('onclickDisabled');
        addAnimationAfterAnimationEnd($(this)[object].id, prevId);
        prevId = $(this)[object].id;
    });

}

function addAnimationAfterAnimationEnd(currentSelection, prevSelection){
    document.getElementById(prevSelection).addEventListener("webkitAnimationEnd", triggerNextAnimation(currentSelection, prevSelection));
    document.getElementById(prevSelection).addEventListener("animationend", triggerNextAnimation(currentSelection, prevSelection));
}

function triggerNextAnimation(selection, prevSelection){
    selection = $('#'+selection);
    selection.addClass('fadeInAnim');
    prevSelection = $('#'+prevSelection);
    prevSelection.removeClass('onclickDisabled');
}

我有一种感觉，在 addAnimationAfterAnimationEnd（）中，函数 triggerNextAnimation（）被触发，但我不知道如何防止这种情况，因为我需要提交参数（或我？）。

如果你们中的一个人可以帮助我，我会非常高兴！

PS：我正在使用“Chrome”和“Firefox”进行测试。

Answer 1

有问题的JavaScript会立即调用函数triggerNextAnimation(currentSelection, prevSelection)，而不是在对象调度事件时引用要调用的函数。

您可以使用Function.prototype.bind()或$.proxy()来引用在调度事件时应调用的函数，并将this设置为特定对象并传递参数。

此外，如果您已经在使用jQuery，则没有必要使用供应商前缀。您可以使用.on("animationend")

document.getElementById(prevSelection).addEventListener("animationend", 
triggerNextAnimation.bind(null, currentSelection, prevSelection))

Answer 2

问题在于，在某些动画之后应该触发的函数只是被执行了。

document.getElementById(prevSelection).addEventListener("animationend", 
triggerNextAnimation.bind(null, currentSelection, prevSelection));

上面的代码解决了这个问题。＆＃34; Function.bind（）＆＃34;使我能够在事件后特定地调用该函数

Javascript：“animationend”事件处理后的动画

2 个答案: