CSS 3 Transactations with Opacity - クロムとFirefox

Question

クロスオーバーの問題が発生したときに、オーバーレイdivをフェードインするためにCSS3トランジションを使用していました。

基本的には、idにスタイルが設定されたdiv要素があります。つまりbackground-color：＃000、不透明度：0などです。ブラウザ固有のトランジションスタイルも同様です。デフォルトでは、overlay要素には「hiddenElement」クラスがあり、表示はnoneに設定されています。

オーバーレイを表示するには、hiddenElementクラスを削除し、別のクラスを「初期化済み」に追加します。このクラスは、要素の不透明度を0.6に設定します。

私は、要素が円滑にアニメーション化されることを期待していました。これはOperaで起こりますが、FirefoxとChromeでは正確に動作しません。

私はここに孤立したケースを作成しました：http://jsbin.com/obojet/27/。

「addClass（ 'Initialized'）」がsetTimeout（）にラップされていることがわかるように、クロムに0msのタイムアウトがあっても正しくアニメーション化されます。タイムアウトの外でaddClassを実行するだけで、アニメーションは実行されません。 firefoxでは、タイムアウトは50ms以上長くする必要があります。オペラではうまくいく。

おそらく単一のスレッドのために競合しているUI/Javascriptには似ていますが、他の誰かが同様の問題を経験しているのであれば私は不思議でした。

Answer 1

私はこれに関するあらゆる種類の問題を抱えていました。これは、CSS3トランジション仕様の本当に悪い部分です。この仕様では、このような動作について何も言及していないからです。

これを行うには予測可能な方法は次のとおりです。オブジェクトの初期状態を設定し

1. 。
2. オブジェクトに遷移関連のCSS3を設定します。
3. この時点で、オブジェクトはdisplay: noneであってはなりません。
4. ブラウザをイベントループに戻し、プレアニメーション状態を確立するために再描画が必要なものを再描画させます。
5. 次に、最終状態を設定し、アニメーションをトリガするクラスをオブジェクトに追加します。
6. アニメーションを実行するためのブラウザのイベントループに戻ります。

これを行うには、予測不可能な方法がある：ディスプレイを含む

1. 何か：のいずれかの状態でなし。
2. イントルタ状態とCSS3の遷移規則を設定する
3. ブラウザをイベントループに戻さずに最終状態を設定します。
4. イベントループに戻ります（CSS3の移行が行われないことがよくあります）。

私は、CSS3トランジションの開始をトリガーせずに、一度にプログラム全体でプロパティの束を一度に変更できるという価値を見ています。しかし、コードの束で初期状態を確立し、実行したい遷移をプログラムで設定してから、最終状態をすべて1つのコードに設定することは珍しいことではありません。今日、あなたはそれをして信頼できる行動を取ることができません。途中でいくつかのsetTimeout呼び出しを挿入する必要があります。何がうまくいくかは、ブラウザーに言う初期状態を設定するための同期関数呼び出しを持つことです：OK、私はこのオブジェクトの初期状態を設定しています。これから行う変更は、私が設定したCSS3の遷移に含めることをお勧めします。次に、余分なsetTimeoutを非意味的にする必要はありません。

あなたの例は、このタイプのものを示しています。最初の状態をの代わりにopacity: 0;にすることで、setTimeoutなしでも動作させることができますが、それはあなたが望むものではないかもしれません。そして、最終状態を確立する前にブラウザによって初期状態（表示なし：なし）が表示され、遷移が機能するはずです。