View Transitions API: Page Transition with Shared Element Morphing
Prompt
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.
CODE PREVIEW
AI rewrites this code based on your instructions. Preview is free; copy & download unlocked for ¥100.
AIとの対話に追加する一言
プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします
このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。
初心者なので、各行にコメントを追加して、何をしているか説明してください。
このコードをWordPressのテーマに組み込む方法も教えてください。
動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。
This tutorial demonstrates how to use the View Transitions API to create smooth page transitions with shared element morphing. When users click the "View Details" button, it smoothly transforms into a detailed product page while maintaining visual continuity.
Key Features
- Shared Element Morphing: The "View Details" button smoothly transforms between different pages
- Cross-fade Animation: Background and other elements fade smoothly during transition
- Programmatic Control: JavaScript API allows precise control over transition behavior
- Fallback Support: Graceful degradation for browsers without View Transitions API support
How It Works
- Each interactive element has a
data-view-transitionattribute with a unique identifier - When clicked, JavaScript captures the click event and prevents default navigation
- The element gets assigned a
view-transition-nameCSS property document.startViewTransition()is called with the navigation logic- The browser automatically creates the morphing animation between the old and new states
Browser Support
The View Transitions API is currently supported in Chrome 111+ and Edge 111+. For unsupported browsers, the code includes a fallback that performs immediate navigation without animation.
Customization Tips
- Adjust animation duration in the
::view-transition-groupCSS rule - Use different easing functions for various animation effects
- Apply different transition names to different elements for complex animations
- Combine with CSS animations for additional effects
Was this prompt helpful?
Comments
Comments appear after moderation
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / クレジットカード対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選