できるだけbodyタグにtransitionを充てない方がいい

CSSはJavaScriptと切れない関係にある

Docker Docmentsのサイトだったり大体のドキュメント系のサイトではダークモードが常用されてるのが普通です。

確かめてみるとわかりますが、JavaScriptを切るとダークモードは機能しません。 ダークモード切り替えを使うすべてのサイトがdangerouslySetInnerHTMLに埋め込んでscriptで走らせています。

そこで今回の本題ですが。 それに加えて「bodyをトランジション」をさせちゃっています。

これをしてしまうとフォントサイズや余白に初期値を設定してやらないと初回リロードで「ぐんにゅ〜」とした動きになってトランジションしていまいます。 これはキャッシュを消去するレンダリングごとに発生するので、キチンと初期値を設定すればほぼ見えなくなります。

なぜ発生するのでしょうか、

おそらく初期値を設定してないと、initialから想定されるドムのサイズまで変更が行われるためこのような動きが再現されるみたいです。 サイズを指定してあげるとそのサイズが最初のレンダリングから固定されるので回避できるということですね。

それを踏まえて結論です。

基本的にHTMLの次の階層のタグであるbodyにtransitionをあてることは控えた方が良さそうです。

その他でパフォーマンスチューニング的なことは。

1<AnimatePresence exitBeforeEnter initial={false}>

これがtrueになっててフレームモーションの中身が毎回初期値になるようになっていました。 つまりこれもJavaScriptを切るとフレームモーションの中身が根こそぎ表示されなくなるということです。

おわり

かなりアニメーションさせるのは今の流行になってきていますが、あっちがアニメーションしたらこっちがなんてことが多いのでcssが巨大になる前にcssに関する機能は実装するべきだと思います。 できるだけですが。