View Transition API

DEMO

CODE

<div class="demo-stage"><div class="vt-wrap"><div class="vt-card" id="vtCard" style="background:#E91B89">CARD A</div><button class="vt-btn" onclick="vtToggle()">TOGGLE</button></div></div>

.vt-wrap { padding:2rem; text-align:center; }
.vt-card { display:inline-flex; align-items:center; justify-content:center; width:200px; height:200px; color:#fff; font-family:'Oswald',sans-serif; font-size:1.5rem; letter-spacing:.2em; view-transition-name:card; border-radius:12px; }
.vt-btn { display:block; margin:1.5rem auto 0; padding:.8rem 2rem; background:#1A1A1A; color:#fff; border:none; font-family:'Oswald',sans-serif; letter-spacing:.2em; cursor:pointer; }
::view-transition-old(card), ::view-transition-new(card) { animation-duration:.6s; animation-timing-function:cubic-bezier(.4,0,.2,1); }

function vtToggle(){ const card = document.getElementById('vtCard'); const isA = card.textContent.includes('A'); const apply = () => { card.textContent = isA ? 'CARD B' : 'CARD A'; card.style.background = isA ? '#7B37A8' : '#E91B89'; card.style.borderRadius = isA ? '50%' : '12px'; }; if(document.startViewTransition){ document.startViewTransition(apply); } else { apply(); } }

AI PROMPT

View Transition APIで滑らかなコンテンツ遷移。document.startViewTransition(callback)で囲んだ変更が自動補間される。CSS側でview-transition-name:cardを付け、::view-transition-old/new疑似要素にanimation-duration:.6s+cubic-bezierを指定。Chrome 111+対応、fallbackは即時適用。

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。