React19.3のView Transitionを基本から使ってみた

import { ViewTransition, useState, startTransition } from "react";export default function Component() {  const [showItem, setShowItem] = useState(false);  return (    <>      <button        className="rounded-sm border px-3 py-1.5"        onClick={() => {          startTransition(() => { // [!code highlight]            setShowItem((prev) => !prev);          });        }}      >        {showItem ? "➖ 非表示にする" : "➕ 表示する"}      </button>      {showItem && (        <ViewTransition>          <div className="mt-4 w-60 rounded-lg bg-blue-500 p-6 text-white">            ViewTransition対象の要素          </div>        </ViewTransition>      )}    </>  );}

const slides = ["🍎 りんご", "🍊 みかん", "🍇 ぶどう", "🍑 もも"];function previousSlide() {  startTransition(() => {    addTransitionType("previous"); // [!code highlight]    setSelected((c) => (c > 0 ? c - 1 : slides.length - 1));  });}function nextSlide() {  startTransition(() => {    addTransitionType("next"); // [!code highlight]    setSelected((c) => (c + 1 < slides.length ? c + 1 : 0));  });}

<ViewTransition  key={selected}  enter={{    default: "none", // [!code highlight]    next: "slide-from-right",    previous: "slide-from-left",  }}  exit={{    default: "none", // [!code highlight]    next: "slide-to-left",    previous: "slide-to-right",  }}>  <div className="w-60 rounded-lg bg-emerald-500 p-6 text-xl text-white">    {slides[selected]}  </div></ViewTransition>

型 '{ next: "slide-from-right"; previous: "slide-from-left"; }' を型 'ViewTransitionClass | undefined' に割り当てることはできません。  プロパティ 'default' は型 '...' にありませんが、型 'ViewTransitionClassPerType' では必須です。

::view-transition-new(.slide-from-right) {  animation-name: slide-in-right;}::view-transition-old(.slide-to-left) {  animation-name: slide-out-left;}@keyframes slide-in-right {  from {    transform: translateX(100%);    opacity: 0;  }}@keyframes slide-out-left {  to {    transform: translateX(-100%);    opacity: 0;  }}

<ViewTransition>  <Suspense fallback={<Loading />}>    <LazyContent />  </Suspense></ViewTransition>

import { Suspense, useState, startTransition, use, ViewTransition } from "react";function LazyProfile() {  const profile = use(fetchProfile());  return (    <div className="w-60 rounded-lg bg-violet-500 p-6 text-white">      {profile.title}    </div>  );}function ProfileLoading() {  return (    <div className="w-60 rounded-lg bg-gray-300 p-6 text-gray-700">      読み込み中...    </div>  );}export default function Component() {  const [showProfile, setShowProfile] = useState(false);  return (    <>      <button        className="rounded-sm border px-3 py-1.5"        onClick={() => {          startTransition(() => {            setShowProfile((prev) => !prev);          });        }}      >        {showProfile ? "➖ 隠す" : "➕ プロフィールを表示"}      </button>      {showProfile && (        <ViewTransition update="auto" default="none"> {/* [!code highlight] */}          <Suspense fallback={<ProfileLoading />}>            <LazyProfile />          </Suspense>        </ViewTransition>      )}    </>  );}