css3 - トランジション変換の最初の display:block に移動効果がないのはなぜですか?

Question

https://jsfiddle.net/zjmove/2...

---xiaoboost の回答を読んだ後 ---
結局、これが最も適切な変更です: https://jsfiddle.net/25d3ga9j...
実際、私はそれを明確にしていませんでした。次のアニメーションは必要ありません。右から左へのアニメーションだけが必要です。初期の display: ブロックにアニメーション効果がない理由については、最初の項目がすでに表示されており、強制リフローで再描画する時間がなかった可能性があります。display: none はページを再描画する必要はありません。左にある場合は右から左に進みます。再度、感謝します。

--
問題はこの強制リフローに関係しているとしか言えませんが、原理はまだ不明です。

--ブラウザによっては大きな違いがあります
上記の変更はFirefoxでは完璧に機能しますが、Chrome57 (ubuntu)ではマウスが動くと一度点滅します

-- 初期表示:ブロック、transforms 属性を出力し、強制リフローが有効になっていないことを確認します。要約すると、display:block はトランジションがあるときは効果を持ちません。
https://jsfiddle.net/25d3ga9j...

Answer 1

まず第一に、これはWebページのレンダリングプロセスとJSプロセスが相互に排他的であるためだと個人的に考えています。

詳細については、次の質問を参照してください: js を使用して要素に className を追加すると、ブラウザーはどうなりますか?
最も投票された回答が、jsスクリプトに次の文を追加したことで、それが非常に明確になったと思います。 リーリー

ページを強制的に再描画したいと考えていますか?

私個人としては、この点に関するブラウザーの具体的な実装については研究したことがありませんが、私の個人的な観察によると、DOM 情報を読み取ると Web ページの再描画が強制されますが、実際には内部データの再計算にすぎず、変更が行われるだけです。 DOM の変更はページに反映されず、実際のページの再描画は現在の JS プロセスが完了するまで待つことしかできません。

特にあなたの例では、違いを示すために、

クラスの後に幅を置きます: .next和.left在css中的宽度稍微改了改，然后js中打印出添加上.next リーリー リーリー

ここでは、印刷された幅が半分しかないことがわかります。これは、メモリ内の DOM データが実際に再計算されたものの、ページが再描画されていないことを示しています。

向こうの質問の解決策と同様に、動的効果を表示できるように、ページ効果の切り替えの間のギャップでページレンダリングのプロセスを解放するには、非同期関数を使用することしかできません。

たとえば、ここでは次のように変更できます:

リーリー