簡単にシームレスな遷移を実装！View Transitions APIでページ遷移を進化させる

tags

frontend

author

category

frontend

mainImage

publishedAt

Sep 26, 2024

published

published

slug

view-transitions-api-20240926

authorDisplayName

Akito Fukuda

View Transitions API とは？

ビュー遷移 API - Web API | MDN

ビュー遷移 API は、異なるウェブサイトのビュー間のアニメーション遷移を簡単に作成するための仕組みを提供します。これには、単一ページアプリケーション (SPA) における DOM 状態変化のアニメーション、および複数ページアプリケーション (MPA) における文書内の移動時のアニメーションを含みます。

https://developer.mozilla.org/ja/docs/Web/API/View_Transitions_API

どんなことができるのか

• 異なるDOM要素間のアニメーション
• View Transitions APIの主な特徴の一つは、異なるDOM要素間でのアニメーションを簡単に実現できることです。これにより、ユーザーが操作する際に、コンテンツの変更がスムーズで視覚的に自然に感じられるようになります。

• ページ遷移のアニメーション
• View Transitions APIを使用すると、ページ遷移時にもアニメーションを簡単に適用することができます。

• CSSによるアニメーションのカスタマイズ
• View Transitions APIでは、デフォルトのアニメーション効果（クロスフェードなど）をCSSでカスタマイズできます。これにより、デザインやブランドガイドラインに合わせたアニメーションを作成することが可能です。

どのように動いているのか

• 基本的な動作: document.startViewTransition()
• View Transitions APIの基本的な動作は、document.startViewTransition()という関数を介して行われます。この関数は、DOMの更新が行われる前に呼び出され、その後のDOMの変化に基づいてトランジションを実行します。
• DOMのスナップショット: startViewTransition()関数を呼び出すと、ブラウザはまず現在の表示状態のスナップショットをキャプチャします。その後、指定されたコールバック関数が実行され、DOMが更新されます。
• アニメーションの生成: DOMが更新された後、ブラウザは新しい表示状態のスナップショットをキャプチャします。この2つのスナップショットの間でアニメーションを生成し、ユーザーに対してスムーズな遷移を提供します。
 例: document.startViewTransition(() => { /* DOMの更新処理 */ });
この例では、startViewTransitionが呼ばれた時点で現在のDOMの状態が保存され、コールバック内でDOMの更新が行われます。その後、新しいDOM状態に基づいてトランジションアニメーションが実行されます。

• ランジションの実行プロセス
• View Transitions APIが実行される際のプロセスは、以下のように段階的に進行します。
• トリガー: ユーザーの操作やJavaScriptコードの実行によって、DOM更新の必要が生じます。この時点で、startViewTransition()が呼び出されます。
• スナップショットの取得: APIは、現在のDOM状態をスナップショットとして記録します。これにより、後で比較するための基準が確立されます。
• DOMの更新: コールバック関数内でDOMの変更が行われます。これには、要素の追加、削除、属性の変更、テキストの変更などが含まれます。
• 新しいスナップショットの取得: DOMの更新が完了したら、ブラウザは新しい状態をスナップショットとしてキャプチャします。
• トランジションの実行: 2つのスナップショットの違いを元に、ブラウザは適切なアニメーションを生成します。要素の位置、サイズ、色、透明度などの変化がアニメーション化され、ユーザーに滑らかな変化として表示されます。

実際に動かしてみる

準備

Add support for View Transition API · vercel next.js · Discussion #46300

Describe the feature you'd like to request I would like to perform animation during transitions. e.g. Transition as if opening a modal in a native app. Describe the solution you'd like Supp...

https://github.com/vercel/next.js/discussions/46300

next v14.2.3 (App Router)
react v18.3.1

interface ViewTransition {
  ready: Promise<void>;
  finished: Promise<void>;
  updateCallbackDone: Promise<void>;
}

interface Document {
    startViewTransition?: (cb: () => Promise<void> | void) => ViewTransition;
}

import { useLayoutEffect, useRef } from "react";
import { useRouter as useNextRouter, usePathname } from "next/navigation";

export const useViewTransitionRouter = (): ReturnType<typeof useNextRouter> => {
  const router = useNextRouter();
  const pathname = usePathname();

  const promiseCallbacks = useRef<Record<
    "resolve" | "reject",
    (value: unknown) => void
  > | null>(null);

  const transitionHelper = (updateDOM: () => Promise<void> | void) => {
    if (!document.startViewTransition) {
      return updateDOM();
    }

    document.startViewTransition(updateDOM);
  };

  useLayoutEffect(() => {
    return () => {
      if (promiseCallbacks.current) {
        promiseCallbacks.current.resolve(undefined);
        promiseCallbacks.current = null;
      }
    };
  }, [pathname]);

  return {
    ...router,
    push: (...args: Parameters<typeof router.push>) => {
      transitionHelper(() => {
        const url = args[0] as string;
        if (url === pathname) {
          router.push(...args);
        } else {
          return new Promise((resolve, reject) => {
            // @ts-ignore
            promiseCallbacks.current = { resolve, reject };
            router.push(...args);
          });
        }
      });
    },
  };
};

• カスタムフックの push メソッドが、transitionHelper によりラップされ、遷移時に startViewTransition が実行されるようにしている点

• ページ遷移の処理後に、アニメーション動作を実行するため、router.push をPromiseでラップしている点

"use client";

import Link from "next/link";
import { ComponentProps, FC } from "react";
import { useViewTransitionRouter } from "./useViewTransitionRouter";

type Props = ComponentProps<typeof Link>;

export const ViewTransitionsLink: FC<Props> = ({ ...nextLinkProps }) => {
  const router = useViewTransitionRouter();

  const handleLinkClick = async (e: React.MouseEvent<HTMLAnchorElement>) => {
    e.preventDefault();

    router.push(e.currentTarget.href.toString());
  };

  return <Link {...nextLinkProps} onClick={handleLinkClick} />;
};

ブログ内の遷移のLinkを差し替えてみる

- import Link from "next/link";
+ import { ViewTransitionsLink } from "../ViewTransitionsLink";

export const PostCard: FC<{ post: NotionPost }> = ({ post }) => {
  return (
-    <Link
+    <ViewTransitionsLink
      href={ROUTES.blog.view(post.slug)}
    >
      <article className={styles.root}>
        {/** MAIN IMAGE */}
        {post?.mainImage?.[0].url && (
          <Image
            className={styles.image}
            src={post.mainImage[0].url || ""}
            alt={post.title}
            width={1280}
            height={670}
            style={{
              width: "100%",
              height: "auto",
            }}
          />
        )}
        {/** HEADER */}
        {/** TITLE */}
        {/** TAGS */}
      </article>
-   </Link>
+   </ViewTransitionsLink>
  );
};

- import Link from "next/link";
+ import { ViewTransitionsLink } from "../ViewTransitionsLink";

export const Header = () => {
  return (
    <header className={styles.root}>
      // ・・・・・
-       <Link href={ROUTES.home()}>
+       <ViewTransitionsLink href={ROUTES.home()}>
          <Logo />
-       </Link>
+       </ViewTransitionsLink>
      // ・・・・・
    </header>
  );
};

少しアニメーションを追加してみる

view-transition-name - CSS: カスケーディングスタイルシート | MDN

view-transition-name は CSS のプロパティで、選択された要素に識別名 (<custom-ident>) を与え、ルートビュートランジションとは別のビュートランジションに参加させます。 none の値が指定された場合はビュートランジションを行いません。

https://developer.mozilla.org/ja/docs/Web/CSS/view-transition-name

View Transitions APIの擬似要素ツリーについて

View Transitions APIは、擬似要素ツリーを構築し、それぞれ以下のような特徴を持つ。

::view-transition ： 全ての要素の上に配置され、遷移の背景色を設定する場合などに適切

::view-transition-group() : view-transition-nameで設定された名前空間上のルート

::view-transition-image-pair() : 新旧ビュー（トランジション前とトランジション後）のコンテナー

::view-transiton-old ： 古いビューのスクリーンショット

::view-transiton-new ： 新しいビューのライブ表現

ビュー遷移 API - Web API | MDN

ビュー遷移 API は、異なるウェブサイトのビュー間のアニメーション遷移を簡単に作成するための仕組みを提供します。これには、単一ページアプリケーション (SPA) における DOM 状態変化のアニメーション、および複数ページアプリケーション (MPA) における文書内の移動時のアニメーションを含みます。

https://developer.mozilla.org/ja/docs/Web/API/View_Transitions_API#css_の追加

デフォルトでは、以下のような構造になっています。

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

これに、

figcaption {
  view-transition-name: figure-caption;
}

のようにすると、

::view-transition
├─ ::view-transition-group(root)
│ └─ ::view-transition-image-pair(root)
│     ├─ ::view-transition-old(root)
│     └─ ::view-transition-new(root)
└─ ::view-transition-group(figure-caption)
  └─ ::view-transition-image-pair(figure-caption)
      ├─ ::view-transition-old(figure-caption)
      └─ ::view-transition-new(figure-caption)

のようになり、rootとは別にアニメーションを適用することができます。

 

export const PostCard: FC<{ post: NotionPost }> = ({ post }) => {
+ const [isTargetCard, setIsTargetCard] = useState(false);

  return (
    <ViewTransitionsLink
      href={ROUTES.blog.view(post.slug)}
      //　クラスをつけるため要素ホバー時にstateを更新
+     onMouseOver={() => setIsTargetCard(true)}
+     onMouseLeave={() => setIsTargetCard(false)}
    >
      <article className={styles.root}>
        {/** MAIN IMAGE */}
        {post?.mainImage?.[0].url && (
          <Image
-           className={styles.image}
            // アニメーションをつけたい画像にだけクラスをつける
+           className={`${styles.image} ${
+             isTargetCard ? styles.viewTransitionImage : ""
+           }`}
            src={post.mainImage[0].url || ""}
            alt={post.title}
            width={1280}
            height={670}
            style={{
              width: "100%",
              height: "auto",
            }}
          />
        )}
        {/** HEADER */}
        {/** TITLE */}
        {/** TAGS */}
      </article>
    </ViewTransitionsLink>
  );
};

/* 追加 */
.viewTransitionImage {
  view-transition-name: post-image;
}

export const PostDetailPage: FC<PostDetailPageProps> = ({
  post,
  recordMap,
}) => {
  return (
    <div className={styles.root}>
      // ・・・・
        <Image
          // アニメーション用のクラスをつける
+         className={styles.mainImage}
          src={post.mainImage.url || ""}
          alt={post.title}
          width={1280}
          height={670}
          style={{
            width: "100%",
            height: "auto",
          }}
        />
      // ・・・・
    </div>
  );
};

/* 追加 */
.mainImage {
  view-transition-name: post-image;
}

• useStateを isTargetCard で、選択される記事カードのみに viewTransitionImage をつける

• onMouseOver、onMouseLeaveを使用して、クラスをつけるため要素ホバー時にstateを更新する

補足

まとめ

令和トラベルでは一緒に働く仲間を募集しています

採用サイト | 株式会社令和トラベル

令和トラベルの採用サイトです。「あたらしい旅行を、デザインする。」というミッションのもと、テクノロジーとアイデアで、共に挑戦していく仲間を募集しています。

https://www.reiwatravel.co.jp/recruit

『NEWT Tech Talk』のお知らせ

【9月開催】After iOSDC & DroidKaigi 2024 | Mobile LT Night

【GO/note/令和トラベル】After iOSDC & DroidKaigi 2024 (2024/09/30 19:30〜)

# 📍 イベント概要 本イベントは、「After iOSDC & DroidKaigi 2024 | Mobile LT Night 」と題して、GO株式会社・note株式会社・株式会社令和トラベルの3社合同にて開催いたします！！ 当日は、各社よりiOS/Androidエンジニア1名ずつ、合計6名がLTに登壇します。(iOS：3名、Android：3名) 今年のiOSDC JapanやDroidKaigiを振り返りつつ、モバイルアプリ開発に関する知見を共有しあえるコンテンツをご用意しています！ イベント当日は、みなさまからいただくご質問にもどんどんお答えしていきます！ ...

https://reiwatravel.connpass.com/event/327079/

【10開催】『【特別編】急成長するNEWTの技術と戦略のすべてを語る 〜 次世代テクノロジーの未来 〜』

【特別編】急成長するNEWTの技術と戦略のすべてを語る ~次世代テクノロジーの未来~ (2024/10/16 19:00〜)

# 🎉 イベント概要 この度、株式会社令和トラベルはシリーズAとして、あらたに合計約48億円の資金調達を実施いたしました。 株式会社令和トラベルは、「あたらしい旅行を、デザインする。」というミッションを掲げ、2021年4月に創業、翌年に海外旅行予約サービス『NEWT（ニュート） 』をローンチしました。サービスローンチ後、流通額は年間約4倍の成長を遂げてきました。 今回のNEWT Tech Talkは資金調達記念として、特別バージョンで開催します！ 代表取締役CEO篠塚がNEWT Tech Talkに初参戦🎊 2度目の資金調達を終え、旅行業界において令和トラベルが成し遂げよ...

https://reiwatravel.connpass.com/event/329609/