6

CSS トランジションで問題が発生しました。別のことを試す前に、何が問題なのかを理解したいと思います。

コンテナには 3 つのボックスと「次へ」ボタンがあります。目標は、次のボックスの上部が上部に表示され、「次へ」ボタンが押されたときにフェードインすることです。ボックスはコンテナに追加することで上に配置されるため、最後の要素として追加されて上に表示され、css トランジションによってフェードインする必要があります。

問題は、ボックスが追加された後に css トランジションが機能していないように見えることです。追加されていないボックス要素でテストすると、css トランジションはうまく機能します。

ここにフィドル、以下のコード：

HTML:

<div class="container">
    <div class="box red"></div>
    <div class="box blue"></div>
    <div class="box green"></div>
</div>

<div id="next">Next</div>

JS:

var container = $(".container");

// Save the current list order
var list = container.children(".box");
// The current index
var current = 0;

// Put the first on top
container.append(list[0]);

function next() {
    // Figure out what is the index of the next box
    if (current + 1 < list.length) current++;
    else current = 0;

    // Save it in a variable
    var target = $(list[current]);

    // Put it on top
    container.append(target);

    // Hide it and then fade it in
    target.css("opacity", 0).css("transition", "opacity 1000ms ease-out").css("opacity", 1);

    // The fading in is not working
}

$("#next").click(next);

更新：

この問題の基本的な解決策は、不透明度を 0 に設定した後、トランジション css を設定する前に、ターゲットで offset() を呼び出すことでした。

target.css("opacity", 0);
target.offset();
target.css("transition", "opacity 1000ms ease-out").css("opacity", 1);

上記のフィドルの更新版はこちら

4

2 に答える 2

2

「リスト」変数は jQuery オブジェクトですが、そこから「ターゲット」として引き出す要素は jQuery オブジェクトではなく、DOM ノードです。したがって、「.css()」への呼び出しは失敗しています (これは、エラー コンソールに報告されます)。

それを修正したら、次はブラウザが一連の CSS 更新をどのように処理するかという問題です。(Linux 上の Firefox 18 から) 正確に何が表示されているかは明確ではありませんが、基本的な問題は、変更の間にレイアウトのリフローが行われないため、最終的な効果はスタイルが「折りたたまれている」ことであると思います。正味の変化はありません。

このフィドルの更新では、別のアプローチを取りました。遷移ルール​​を「ボックス」クラスに入れ、「プレフェード」クラスを追加しました。

.prefade {
  transition-duration: 0;
  opacity: 0;
}

次に、要素のスタイルをいじる代わりに、追加する前に「プレフェード」を追加し、要素のオフセットを要求してレイアウトの更新をトリガーします。次に、「プリフェード」クラスを削除すると、ボックスがフェード インします。

target.addClass('prefade');
// Put it on top
container.append(target);

var p = target.offset();

target.removeClass('prefade');

それが「正しい」方法であるかどうかはわかりません。編集— Chrome で機能させるには、「トランジション」プロパティを-webkit-プレフィックスで繰り返す必要があります。

于 2013-02-01T21:12:02.920 に答える
2

代わりに jQuery フェードを使用して、CSS トランジションをサポートしていないブラウザーでコードを動作させることができる場合、CSS トランジションを使用する特定の理由はありますか?

var $container = $(".container");

function next() {
    var $next = $container.children().first();
    $next.hide().appendTo($container).fadeIn();
}

$("#next").click(next);

コンテナから最初の要素を取得して後ろに移動するだけで、維持している多くの状態を回避できることに注意してください。DOM が状態を維持します。

http://jsfiddle.net/alnitak/w6y3B/を参照してください

于 2013-02-01T21:15:48.210 に答える