5

cssアニメーションが終了し、大部分が機能しているときにjQueryを使用してイベントを発生させようとしていますが、何らかの理由でtransitionend、問題のオブジェクトからマウスを離すまでイベントが呼び出されません。

メソッドは次のとおりです。

function replaceWithSearch(){
    var searchWrapper = constructSearchBox("");
    $(this).addClass("animated fadeOut"); // css animation
    $(this).on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
    function (e){
        console.log(e);
        $(this).parent().replaceWith(searchWrapper);
        if (document.URL.indexOf("search?s=") == -1){
            document.getElementById("searchbox").focus();
        }
    });
}

$(this)最初のcssアニメーションが終了した後、マウスを要素に置いたままにするtransitionendとイベントが発生しないという例外を除いて、ほとんどは機能しているようです。マウスを要素から離すとすぐに、すべてが完全に機能します。

私は本当にこれで途方に暮れています、何かアイデアはありますか? animate.cssで css クラスを使用しています。

4

1 に答える 1

12

transitionendCSS トランジションを使用していないため、イベントを取得していません。CSSアニメーションを使用しています。animatedおよびfadeOutクラスの CSS はanimate.css次のとおりです。

.animated {
    -webkit-animation-duration: 1s;
       -moz-animation-duration: 1s;
         -o-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: both;
       -moz-animation-fill-mode: both;
         -o-animation-fill-mode: both;
            animation-fill-mode: both;
}

.animated.fadeOut {
    -webkit-animation-name: fadeOut;
    -moz-animation-name: fadeOut;
    -o-animation-name: fadeOut;
    animation-name: fadeOut;
}

@-webkit-keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

@-moz-keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

@-o-keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

@keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

.animated.fadeOut {
    -webkit-animation-name: fadeOut;
    -moz-animation-name: fadeOut;
    -o-animation-name: fadeOut;
    animation-name: fadeOut;
}

それはCSS トランジションではなく、CSS アニメーションです。完了時にさまざまなイベントをトリガーします。

これを置き換えます：

$(this).on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',

これとともに：

$(this).on('webkitAnimationEnd oanimationend oAnimationEnd msAnimationEnd animationend',

そして、すべてがうまくいくはずだと思います。

要素からマウスを離したときに何かが起こっていたという事実$(this)は、偶然だと思います。おそらく、ハンドラーのように完全に別のハンドラーがあり、 mouseoutハンドラーと間違えているのと同様の動作をしているtransitionend、またはホバー時にいくつかの CSS トランジションが適用されていて、そのうちの 1 つがtransitionendフェードアウトとはまったく関係のないイベントをトリガーしている可能性がありますか?

于 2013-07-24T19:56:04.590 に答える