View Transitions API 初回アクセスはcssフェードインさせる

Filed under: css,View Transitions API — kdcs @ 26年2月24日 火曜日

【実行中 2026.2.25】
View Transitions APIはページ遷移でのトランジション制御なので最初にウェブサイトにアクセスしたときは何も実行されない。
そこで初回アクセスだけcssでフェードインさせて、以降のページ遷移ではView Transitions APIを使うように設定する。

あらかじめhtmlに「visit」というクラスを付けておくページ遷移を行う際、javascriptで「visit」を「view」に切り替える。
visit = 初回のみのcssフェードイン（View Transitions APIを無効化）
view = View Transitions APIを有効化

html

<html lang="ja" class="visit">

css

/* 初回だけ wrapper をフェードイン */
.visit #wrapper {
  animation: fadein 1s ease-in forwards;
}

@keyframes fadein {
  0% { opacity: 0.01; }
  20% { opacity: 0.01; }
  100% { opacity: 1; }
}

/* 2回目以降のページ遷移に View Transitions を適用 */
@view-transition {
  navigation: auto;
}

/* 初回は View Transitions を無効化 */
.visit @view-transition {
  navigation: none;
}

/* フェードのみ */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.6s; /* フェード時間 */
  animation-timing-function: ease-in-out;
}
/* フェード+ズーム */
@keyframes zoom-fade-in {
  from { opacity: 0; transform: scale(0.90); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes zoom-fade-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.10); }
}

::view-transition-new(root) {
  animation: zoom-fade-in 0.5s ease;
}

::view-transition-old(root) {
  animation: zoom-fade-out 0.4s ease;
}

javascript

// すでに訪問済みなら visit をviewに入れ替え
if (sessionStorage.getItem("visited")) {
  document.documentElement.classList.remove("visit");
  document.documentElement.classList.add("view");
} else {
  // 初回アクセス
  sessionStorage.setItem("visited", "true");
}

サイト内検索

カテゴリー

最近の投稿

« ｜View Transitions API 初回アクセスはcssフェードインさせる｜ »
↑上に戻る