<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

ELW株式会社テックブログ

リアルなログをそのままお届けします。

MCPを理解する

Redis Streamsを利用した通知アーキテクチャ

◆はじめに

Tanstack Router

Kotlinpoet による Kotlinコードの生成

Django と Quarkus + Kotlin に学ぶバックエンド開発スタイル比較

1. Djangoとは

vinxiやviteなどのエコシステムを整理

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

ViewTransitionAPIとは

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

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

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

Suspenseのfallbackと組み合わせる

Next.jsでの使い方

まとめ

参考