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 に答える