https://jsfiddle.net/zjmove/2...
---xiaoboost の回答を読んだ後 ---
結局、これが最も適切な変更です: https://jsfiddle.net/25d3ga9j...
実際、私はそれを明確にしていませんでした。次のアニメーションは必要ありません。右から左へのアニメーションだけが必要です。初期の display: ブロックにアニメーション効果がない理由については、最初の項目がすでに表示されており、強制リフローで再描画する時間がなかった可能性があります。display: none はページを再描画する必要はありません。左にある場合は右から左に進みます。再度、感謝します。
--
問題はこの強制リフローに関係しているとしか言えませんが、原理はまだ不明です。
--ブラウザによっては大きな違いがあります
上記の変更はFirefoxでは完璧に機能しますが、Chrome57 (ubuntu)ではマウスが動くと一度点滅します
-- 初期表示:ブロック、transforms 属性を出力し、強制リフローが有効になっていないことを確認します。要約すると、display:block はトランジションがあるときは効果を持ちません。
https://jsfiddle.net/25d3ga9j...
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
まず第一に、これはWebページのレンダリングプロセスとJSプロセスが相互に排他的であるためだと個人的に考えています。
詳細については、次の質問を参照してください: js を使用して要素に className を追加すると、ブラウザーはどうなりますか?
ページを強制的に再描画したいと考えていますか?最も投票された回答が、
jsスクリプトに次の文を追加したことで、それが非常に明確になったと思います。 リーリー
私個人としては、この点に関するブラウザーの具体的な実装については研究したことがありませんが、私の個人的な観察によると、DOM 情報を読み取ると Web ページの再描画が強制されますが、実際には内部データの再計算にすぎず、変更が行われるだけです。 DOM の変更はページに反映されず、実際のページの再描画は現在の JS プロセスが完了するまで待つことしかできません。
特にあなたの例では、違いを示すために、クラスの後に幅を置きます:
ここでは、印刷された幅が半分しかないことがわかります。これは、メモリ内の DOM データが実際に再計算されたものの、ページが再描画されていないことを示しています。.next和.left在css中的宽度稍微改了改，然后js中打印出添加上.nextリーリー リーリー向こうの質問の解決策と同様に、動的効果を表示できるように、ページ効果の切り替えの間のギャップでページレンダリングのプロセスを解放するには、非同期関数を使用することしかできません。
たとえば、ここでは次のように変更できます:リーリー