13

迷惑なバグを見つけました。親の位置が同時に変化しているときに、子要素のCSSプロパティをアニメーション化しようとします（この例では、固定から絶対になっています）。これはWebkitブラウザーでは問題なく機能しますが、Firefox（v。17.0.1）ではアニメーション化されたトランジションはありません。

jsFiddleの例：http ：//jsfiddle.net/chodorowicz/bc2YC/5/

FFで動作させるための解決策はありますか？

編集 Firefox34で修正されました https://bugzilla.mozilla.org/show_bug.cgi?id=625289

CSS

#container {
    position:fixed; left:100px; top:100px;
}
#container.some_state_position {
    position:absolute;
}
.box {
    width:100px; height:100px;
    background:blue;
}

.some_state .box {
    background:red; width:50px; height:50px;
}

img, .box  {
    -webkit-transition:all 1.5s ease;
    -moz-transition:all 1.5s ease;
    -ms-transition:all 1.5s ease;
    transition:all 1.5s ease;
}
img {width:100%;}
.some_state .other_container img {
    width:50%;
}
4

1 に答える 1

18

良いバグを見つけたようです。これは私のお気に入りの修正ではありませんが、それでうまくいきます。ボタン2を変更して、クリック時にこれを行います。

$("#button2").on({
    click: function() {
        $("#container").toggleClass("some_state");

        setTimeout(function() {
            $("#container").toggleClass("some_state_position");
        }, 50);
    }
});

Firefoxの場合、toggleClass（）が両方のクラスですぐに起動し、遷移効果にいくつかの問題が発生するようです。タイムアウトを設定すると、Chromeなどと同様の遷移を実行するために必要な処理を実行するのに十分な時間がjQueryに与えられます。タイムアウトを50ミリ秒に設定すると、jQueryが処理するのに十分な時間が与えられるようです。それをする必要があります。私が時々見たよりも低くなると、それは失敗し、あなたが現在経験していることをします。

于 2012-12-14T18:29:05.450 に答える