5

Firefox での CSS トランジションに問題があります。Twitter Bootstrap カルーセルを使用します。写真が右から左にスライドしないように、いくつかの変更を加えました。代わりに、フェードインとフェードアウトします。また、カルーセル キャプションにいくつかの CSS トランジションを追加しました。

ここに私のコードがあります: http://jsfiddle.net/Jh3rF/181/

Chrome ではすべて正常に動作しますが、Firefox (バージョン 16、Mac) では動作しません。カルーセルの次のリンクをクリックすると、すばらしい遷移が表示されます。アクティブなスライドがフェードアウトし、キャプションが右に移動します。ただし、次のスライドのキャプションが突然表示されるのに対し、Chrome では優れたトランジションがあります (キャプションが上から下に移動し、うまくフェードインします)。ここでエラーが見つかりません。

アドバイスをいただければ幸いです。

4

2 に答える 2

0

この投稿で回答されているように、トランジション効果を持たせたいプロパティのベース値を宣言してみてください:

CSS3 Transition が Firefox で機能しないのはなぜですか?

于 2012-10-23T08:04:44.247 に答える
0

私はちょうど同じ問題を抱えていました。アニメーションはGoogle Chromeでうまく機能しますが、Firefoxでは突然表示されます。

私が行ったことは非常に単純で、次のスライドが来るときにクラスを削除して追加します。

コードは次のとおりです。

$('#carousel-main').on('slide.bs.carousel', function (e) {
    $(e.relatedTarget).find('.animated').each(function() {
        var item = $(this);
        var classes = item.attr('class');
        item.attr('class', '');
        item.hide();
        setTimeout(function(){
            item.show();
            item.addClass(classes);
        }, 10);
    });
});
于 2015-03-13T22:58:41.100 に答える