自分の２つのサイトをリンクで移動した際に一瞬真っ白にならないようにアニメーションをきれいに実行する方法

Question

「要約」:自分が運営している複数のサイトの上でのリンク移動の際に一瞬真っ白にならないような方法を教えて下さい。アニメーションがそのせいでうまく行かなくて困っています。

https://supercrowds.co/what/

このサイトで、左の**「who we are」というボタンを押してみるとエフェクトが発生しながらアドレスが変わっている**のがわかると思います。

リンクをクリックするという動作(https://supercrowds.co/what/→から→https://supercrowds.co/who/へ移動)
によって他アドレスに移動して読み込む際にスムーズにアニメーションが行われていると思うのですが、、

自分で作った際に他アドレスに移動する際にどうしても一瞬だけ画面が白くなってしまって発生するアニメーションエフェクトを阻害してしまいます。

よく青文字のリンクをタップしたときに一度画面が一瞬だけ白くなってからサイトが表示されますよね？（↓ご覧の通り）

その現象によって肝心のアニメーションの途中で一度真っ白になってしまうのです。

アドレスが変化しているにも関わらず、どのようなテクニックを使って真っ白にならずにこのようなアニメーションをきれいに実現させているのかを教えて下さい。

Answer 1

JavaScript の History API というものを利用して、ブラウザに表示されるURLを変化させることができます。
https://developer.mozilla.org/ja/docs/Web/API/History_API/Working_with_the_History_API

サンプルのソースを追ったわけではないのですが、おそらくユーザーのアクションに応じて非同期通信でデータを取得し、画面遷移のエフェクトをかけながらHistory APIでURLも変更してるのではないでしょうか。