1

要素にスタイルを適用し、その後すぐに CSS トランジション スタイルを追加すると、トランジションは前のスタイルに適用されます。これは常に意図されているとは限りません。

settimeout (0) を使用して解決策を見つけました。よりクリーンでより正しいアプローチが知られていますか?

http://jsfiddle.net/nicib83/XP9E7/

$("div").css("opacity", 1);

$("div").css("-webkit-transition", "all 0.35s");

/* Works
window.setTimeout(function () {
    $("div").css("-webkit-transition", "all 0.35s");
}, 0);
*/

よろしくお願いします

編集：

私はcssスタイリングを設定する最善の方法を意味していませんでしたが、最初のスタイルを適用する必要があるときに2番目のスタイルをアクティブにせずにスタイルを順次設定する方法を意味していましたが、後でのみトランジションを追加したいと思います。settimeout はそれを修正します、最善の解決策は?

4

3 に答える 3

0

適用する両方のプロパティを含むクラスを事前に定義し、そのクラスをプログラムで要素に追加することをお勧めします。両方のプロパティが一緒に適用されます。

.myClass {
    opacity: 1;
    -webkit-transition: all 0.35s;
}

$("div").addClass("myClass");
于 2013-01-11T19:14:28.967 に答える
0

Twitter Bootstrap の本からページを取得できます。

fade {
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    -moz-transition:opacity 0.15s linear;
    -o-transition:opacity 0.15s linear;
    transition:opacity 0.15s linear;
}
.fade.in{
    opacity:1;
}

次に、フェードインするときにプログラムでクラスを追加し.inます。

$("div").addClass("in");

元の div は次のようになります。

<div class="fade">Box</div>
于 2013-01-11T19:16:23.443 に答える
0

私はこれに対して自分で実行しており、 setTimeout ソリューションも見つけました。いくつかの調査の後、問題はブラウザがスケジューリングを処理する方法です。JavaScript は、UI と DOM を処理するスレッドとは別の独自のスレッドで実行されます (これが、UI のブロックなどの問題が発生する理由です)。

このような場合、ドキュメントが最初の変更を登録する前に両方の JavaScript ステートメントが実行され、最終的に両方のクラスが同時に適用されます。setTimeout(fn,0) は、関数を効果的に非同期にし、次の利用可能な機会に関数を実行するようにシャントします。これにより、次のクラスが追加される前に UI スレッドが追いつくことができます。

于 2013-11-07T15:30:38.687 に答える