2

こんにちは、jquery の .one メソッドを使用して関数を webkitTransitionEnd にバインドしようとしています。私がする時： 

$element.one( "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd",
function(e) { 
    $element.removeClass( ".alert-resets" ) 
 });

transitionend イベントへのバインドは解除されません。代わりに、遷移を行うたびにクラスを削除します

jsfiddle はこちら: http://jsfiddle.net/DVC5A/

わかりました私はSOでこの解決策を見つけました:

ブラウザー間で CSS3 Transition 関数を正規化するにはどうすればよいですか?

4

3 に答える 3

3

.one()のドキュメントでは、「最初の引数にスペースで区切られた複数のイベント タイプが含まれている場合、イベント ハンドラはイベント タイプごとに 1 回呼び出されます。

このタイプのイベントを処理するためのより適切な方法があるかどうかはわかりません (1 つのイベント名だけをリッスンすることはおそらく機能しますが、それがクロスブラウザーでどのように機能するかはわかりません)。ただし、いずれにせよ、.off() を使用して自分でバインドを解除することができ、イベント名前空間を使用してそれを簡単にすることができます。

$(".my_butt").on("click", function (e) {
    $(".block").addClass("in");

    $(".block").on("transitionend.my MSTransitionEnd.my webkitTransitionEnd.my oTransitionEnd.my", function (e) {
        var el = $(this);
        el.off('.my');
        setTimeout(function () {
            el.removeClass("in");
        }, 3000);
    });
});

JSFiddle: http://jsfiddle.net/DVC5A/6/

于 2013-05-26T22:09:49.467 に答える
1

あなたが何をしようとしているのか本当に理解できませんが、とにかく試してみますか? これはあなたのコードです：

$(".my_butt").on("click", function (e) {
    $(".block").addClass("in");

    $(".block").one("transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd", function (e) {
        console.log('pl')
        setTimeout(function () {
            $(".block").removeClass("in");
        }, 3000);
    });
});

transitionEndボタンをクリックするたびに、イベントハンドラーがボタンのクリックイベントハンドラー内にあるため、イベントをより多く再バインドするone()ため、もちろん、ボタンをクリックするたびにクラスが削除されますか?

transitionEndドキュメントが読み込まれるたびに 1 回だけイベント ハンドラーをアタッチするには、イベント ハンドラーをボタンのクリック関数の外に移動します。

$(".my_butt").on("click", function (e) {
    $(".block").addClass("in");
});

$(".block").one("transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd", function (e) {
    setTimeout(function () {
        $(".block").removeClass("in");
    }, 3000);
});
于 2013-05-26T21:50:46.467 に答える