8

私はCSS3トランジションの終了を検出するために次のように使用しています：-

    CACHE.previewControlWrap.css({
                'bottom':'-217px'
            }).one('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function () {
                CACHE.songWrap.css({
                    'bottom': '0'
                });
     });

これは完全に機能し、CSS遷移が実行され、完了すると別の遷移が実行されます。

ただし、この匿名関数を3番目のレベルにネストすると、機能しません。3番目の遷移'end'イベントは、2番目のイベントと同時に発生します（jQuery .animate（）で発生するように）。

私がやりたいのは、「transitionend」イベントを「特定の」要素に結び付けることです。現在、任意の要素でtransitionendイベントを探しているようで、それに応じて起動します。そうでない場合は、前のイベントが完了した後に3つの連続するcss遷移イベントをすべて起動するようにキューに入れることができるようにする別の回避策があります。

前もって感謝します。

以下は、問題の原因となっているコードです：-

if(Modernizr.csstransitions){

        CACHE.leftcolbottom.css({
            'left':'-230px'
        });
        CACHE.songwrap.css({
            'left':'100%',
            'right': '-100%'
        });
        CACHE.previewControlWrap.css({
            'bottom':'-217px'
        }).one('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function () {
            CACHE.songWrap.css({
                'bottom': '0'
            });
            CACHE.middle.css({
                'bottom': '350px'
            }).one('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function () {
                CACHE.slidewrap.css({
                    'left': '50%',
                    'right': '0%'
                });
                CACHE.leftcoltop.css({
                    'left': '0%'
                });     
            });         
        });

    }
4

1 に答える 1

11

さて、私は実際に自分で答えを見つけました。うまくいけば、これは同じ問題を抱えている他の誰かを助けるでしょう。

解決策は、「fire once」.one（）メソッドではなく、標準のjQuery .on（）メソッドを使用することです。次に、ターゲットをチェックして、イベントをバインドした要素であるかどうかを確認し、最後に、同じ無名関数内のイベントハンドラーを削除します。

私の場合、「3番目の」ネストされた遷移コードは次のようになります。-

}).on('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function (e) {
                if($(e.target).is(this)){
                    CACHE.slidewrap.css({
                        'left': '50%',
                        'right': '0%'
                    });
                    CACHE.leftcoltop.css({
                        'left': '0%'
                    });
                    $(this).off('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd');
                }
            });

他の誰かがよりエレガントな解決策を持っているなら、私に知らせてください、そして私はあなたに適切に答えを与えます。

于 2012-05-22T18:16:12.433 に答える