JavaScript

It’s a feature that allows smooth visual transitions when part of the screen changes.

startViewTransition()

startViewTransition()は、ページ内の見た目が変わるときに、滑らかで自然なアニメーション効果を自動で作ってくれる機能です。

たとえば、ページの一部をクリックして内容が切り替わる場面で、従来はパッと切り替わっていましたが、このAPIを使うと、「古い状態から新しい状態へと変化する様子」を滑らかに見せられます。

具体的には、document.startViewTransition()を呼び出すことで、ブラウザが自動的にアニメーションを生成し、ユーザーにとって心地よい体験を提供します。

開発者は、アニメーションの詳細なタイミングや描画の切り替え処理を自分で作り込む必要はなく、startViewTransition()の中でDOMの書き換え処理を行うだけで、あとはブラウザが自然な切り替えをしてくれます。

対応ブラウザは現時点では限られていますが、ユーザー体験を向上させる新しい選択肢として注目されています。