kdcsライブラリー

View Transitions APIの開発はスマートフォンの方が先行していてパソコンのブラウザについてはedgeは比較的安定しているがchromeは開発中で不安定になる。そこで、安定的に使えるスマートフォンだけView Transitions APIを使うための切り替え方法。

スマホだけUserAgentで判定する方法（こちらが確実）

javascript

// スマホ判定（iPhone / Android）
const ua = navigator.userAgent.toLowerCase();
const isMobile =
  ua.includes("iphone") ||
  (ua.includes("android") && ua.includes("mobile"));

if (isMobile) {
  document.documentElement.style.setProperty("--vt-enabled", "1");
} else {
  document.documentElement.style.setProperty("--vt-enabled", "0");
}

css

@view-transition {
  navigation: auto;
}

/* スマホ以外では View Transitions を完全に無効化 */
:root:not([style*="--vt-enabled: 1"]) {
  view-transition-name: none !important;
}

:root:not([style*="--vt-enabled: 1"]) .photo-1 {
  view-transition-name: none !important;
}

/* root のアニメーション */
@keyframes zoom-fade-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

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

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

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

/* スマホでのみ有効になる .photo-1 */
.photo-1 {
  view-transition-name: photo-example-1;
  contain: paint;
}

画面幅（768px）で切り替える方方法

javascript

if (window.matchMedia("(max-width: 768px)").matches) {
  document.documentElement.style.setProperty("--vt-enabled", "1");
} else {
  document.documentElement.style.setProperty("--vt-enabled", "0");
}

css

@view-transition {
  navigation: auto;
}

/* スマホ以外では View Transitions を完全に無効化 */
:root:not([style*="--vt-enabled: 1"]) {
  view-transition-name: none !important;
}

:root:not([style*="--vt-enabled: 1"]) .photo-1 {
  view-transition-name: none !important;
}

/* root のアニメーション */
@keyframes zoom-fade-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

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

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

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

/* スマホでのみ有効になる .photo-1 */
.photo-1 {
  view-transition-name: photo-example-1;
  contain: paint;
}