The View Transition API is a new feature on web that simplifies the process of creating animated transitions for shared element. Previously, achieving smooth transitions for shared element on the web was a complex task. However, with the introduction of this API, we can now easily animate shared element, allows us to create engaging and fluid navigational experiences, similar to those found in mob
View Transition API 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 View Transition APIは他ページへの遷移にアニメーション効果を適用するCSSです。 2024年秋に予定されているiOS18に搭載されるSafariで使用可能となり、主要ブラウザすべてでサポートされることが見込まれます。 これまでにないダイナミックな効果を表現できるView Transition APIは使いこなせばWeb制作者にとって大きな武器となるでしょう。 基本的な設定 ファインチューニング 不具合 バットマン！！！！！ 基本的な設定 View Transition APIは、おそらく最も興奮する新しいCSSメカニズムの1つです。SPA(シングルページアプリケーション)のようなページ遷移をネイティブに構築する方法を提供することを約束
--- import { ViewTransitions } from "astro:transitions"; // ... --- <!DOCTYPE html> <html lang="ja"> <head> // ... <ViewTransitions /> </head> </html> これだけでOK なんと設定はこれだけです。やばすぎる。 使い方 要素のタイプや位置から Astro が自動で古いページ/新しいページ間の関連付けやアニメーションを行なってくれます。 それだけではなく、transition:* ディレクティブにより柔軟なカスタマイズにも対応可能です。現在、主に3つ用意されています。 transition:name: 古いページと新しいページに対応する DOM 要素の関連付け。基本自動でやってくれるのであまり使わない気もしますが、認識されない時に手動で制御できます
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Using View Transition API in React App
インパクト大！View Transition APIによるページ遷移の実装例 - コハム
Astro SPAモード!? View Transition試してみた