2026年4月17日

View Transitions API: 共有要素モーフィング付きページ遷移

提示词

Create a page transition using the View Transitions API where a shared element (like a card or button) smoothly morphs between two different pages. The element should change position, size, and content while maintaining a fluid animation.

代码预览

用AI自定义代码

AI根据您的指示重写代码。预览免费，复制和下载需¥100解锁。

オリジナル

AIとの対話に追加する一言

プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします

このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。

初心者なので、各行にコメントを追加して、何をしているか説明してください。

このコードをWordPressのテーマに組み込む方法も教えてください。

動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。

このチュートリアルでは、View Transitions APIを使用して共有要素のモーフィングを含むスムーズなページ遷移を作成する方法を紹介します。ユーザーが「詳細を見る」ボタンをクリックすると、視覚的な連続性を保ちながら詳細な商品ページへと滑らかに変形します。

主な特徴

共有要素モーフィング: 「詳細を見る」ボタンが異なるページ間で滑らかに変形
クロスフェードアニメーション: 背景やその他の要素が遷移中に滑らかにフェード
プログラム制御: JavaScript APIによる遷移動作の精密な制御
フォールバック対応: View Transitions APIをサポートしていないブラウザへの対応

動作の仕組み

各インタラクティブ要素には一意の識別子を持つdata-view-transition属性が設定されています
クリックされると、JavaScriptがクリックイベントをキャプチャし、デフォルトのナビゲーションを防止します
要素にview-transition-name CSSプロパティが割り当てられます
ナビゲーションロジックと共にdocument.startViewTransition()が呼び出されます
ブラウザが古い状態と新しい状態の間のモーフィングアニメーションを自動的に作成します

ブラウザサポート

View Transitions APIは現在、Chrome 111+およびEdge 111+でサポートされています。サポートされていないブラウザでは、アニメーションなしで即座にナビゲーションを行うフォールバックコードが含まれています。

カスタマイズのヒント

::view-transition-group CSSルールでアニメーションの持続時間を調整
さまざまなアニメーション効果に異なるイージング関数を使用
複雑なアニメーションのために異なる要素に異なる遷移名を適用
追加効果のためにCSSアニメーションと組み合わせ

这个提示对您有帮助吗？

评论将在审核后显示

この記事が役に立ったら投げ銭で応援

Apple Pay / Google Pay / クレジットカード対応 · Stripeで安全に決済

開発者が選ぶ最強ツール集

運営者が毎日使っているツール・ガジェット 6選

見る