Reactの<ViewTransition>コンポーネントを使ってみた

ViewTransitionAPIとは

• ページを遷移する際にスムーズなアニメーションを追加できるブラウザネイティブのAPI
• メリット
  • 遷移アニメーションがスムーズ
  • 記述が簡単
  • ブラウザネイティブの機能ため、JavaScriptによるアニメーションよりパフォーマンスが優れている

developer.mozilla.org

ReactでViewTransitionコンポーネントが利用できるようになる

• <ViewTransition> コンポーネントが実験的にReactに追加された

github.com

• <ViewTransition> で子要素をラップすることで、それらの間の変化をアニメーション機能を提供する
• <ViewTransition> を使う場合、Reactのコンポーネントを切り替えても内部のDOMノードが自動的に同じ view-transition-name を持つ場合、アニメーションが適用される（defaultでname=”auto”が割り当てられる）

ViewTransitionコンポーネントの使用方法

• react@experimental をinstall

    npm install react@experimental
  

• 現時点で実験的な機能なため unstable_ViewTransition としてimportする

    import { unstable_ViewTransition as ViewTransition } from 'react'
  

• condition の変更は startTransition でラップする必要がある

    function App() {
      const [condition, setCondition] = useState(true)
  
      const changeCondition = () => {
        startTransition(() => {
          setCondition(prev => !prev)
        })
      }
  
      return (
        <>
            <botton onClick={changeCondition}>
            change condition
          </button>
          <ViewTransition>
            {condition ? <ComponentA /> : <ComponentB />}
          </ViewTransition>
        </>
      )
    }
  

アニメーションのカスタマイズ

• <ViewTransition>コンポーネントは、デフォルトでview-transition-name: autoを適用し、簡単なトランジションを自動的に行う

• より詳細なアニメーションを制御したい場合は、nameプロパティを指定

    <ViewTransition name="sloq-fade">
      {page === 'A' ? <PageA /> : <PageB />}
    </ViewTransition>
  

• これにより、CSSの::view-transition-old(slow-fade)と::view-transition-new(slow-fade)疑似要素を使用して、アニメーションをカスタマイズできる

::view-transition-old(.slow-fade) {
    animation-duration: 500ms;
}

::view-transition-new(.slow-fade) {
    animation-duration: 500ms;
}

Suspenseのfallbackと組み合わせる

• <ViewTransition> で fallback と Content をラップすると、スケルトンからコンテンツへの切り替えも スムーズなクロスフェード になる

    <ViewTransition>
      <Suspense fallback={<Skeleton />}>
        <Content />
      </Suspense>
    </ViewTransition>
  

Next.jsでの使い方

• Next.js 15.2では、実験的にReact View Transitions APIのサポートが追加された

• <ViewTransition>コンポーネントを利用するには、next.config.jsでviewTransitionフラグをtrueに設定する

    // next.config.js
    module.exports = {
      experimental: {
        viewTransition: true,
      },
    };
  

まとめ

• ViewTransitionコンポーネントは、ページ遷移ではなく、コンポーネント内での小さなUI変更をスムーズにしたい場合に利用する
• 完全なページ遷移で利用したい場合はstartViewTransitionを使う

参考

react.dev

azukiazusa.dev