2

奇妙な問題が発生したときに、オーバーレイ div をフェードインするために CSS3 トランジションをいじっていました。

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

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

私が期待していたのは、要素がスムーズにアニメーション化されることでした。これは Opera で発生しますが、firefox と chrome ではまったく同じようには機能しません。

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

「addClass('Initialized')」が setTimeout() でラップされている場合にわかるように、クロムで 0 ミリ秒のタイムアウトを使用しても、正しくアニメーション化されます。タイムアウト外で addClass を実行するだけでは、アニメーションは実行されません。Firefox では、タイムアウトを長くする必要があります (50 ミリ秒)。オペラではそれがうまくいきます。

おそらく単一スレッドをめぐって UI/Javascript が競合していることが原因ですが、他の誰かが同様の問題を経験したことがあるかどうかに興味がありました.

4

1 に答える 1

2

私はこれに関してあらゆる種類の問題を抱えてきました。仕様ではこの種の動作について何も述べられていないため、これは 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 なしで動作させることができますが、それdisplay: none;はあなたが望むものではないかもしれません。次に、最終状態を確立する前に初期状態 (表示なし: なし) がブラウザーに表示され、遷移が機能するはずです。

于 2011-07-14T21:46:46.347 に答える