0

我有一个使用 css 转换的自定义动画框架。

为了允许回调我附上

$element.one('webkitTransitionEnd transitionend',function(){
    $element.css({
        '-webkit-transition':'',
        /* And so on... */
     });

    if(callback){
        // This is to make sure that chained events are not fired before the styling is flushed to the DOM, otherwise some animations will not have css transitions
        setTimeout(function(){
            callback(); 
        },0);
    }
});

$element.css({
    '-webkit-transition':'height '+duration+'s ease-out',
    /* And so on... */
    });
$element.css('height',height);

但是，一些相同的事件侦听器会一次又一次地触发（是的，它实际上是具有相同 guid 的相同函数，我检查过）。似乎 .one 没有再次正确删除它。

我试过用一个小测试修复

var used = false;

$element.one('webkitTransitionEnd transitionend',function(){
    if(!used){
        used = true;
        /* Rest of function... */
    }
}

如果他们被解雇了，我会使用布尔值来跟踪他们是否被解雇，所以我至少阻止他们重新解雇。但我想知道他们为什么要重新开火。

4

1 回答 1

1

我怀疑两者都webkitTransitionEnd被transitionend解雇了，所以你最终会在你的元素上绑定很多未使用的事件。我会取消绑定事件而不是使用绑定.one：

$element.on('webkitTransitionEnd transitionend', function() {
    $element.off('webkitTransitionEnd transitionend', arguments.callee);
});

请注意，上面的示例在使用"use strict". 然后你应该使用：

$element.on('webkitTransitionEnd transitionend', function handler() {
    $element.off('webkitTransitionEnd transitionend', handler);
});

不确定它是否能解决您的问题。不过你可以试试。

什么是：

arguments.callee
"use strict"

于 2013-06-03T13:50:36.260 回答