用AI生成View Transitions API页面过渡动画的提示词示例
代码预览
エディタを読み込み中…
P
提示词
Build a demo showing how to use the View Transitions API for smooth page transitions between two content pages. Include a navigator to switch pages, with a crossfade animation.
View Transitions API を使うと、ウェブページの異なる状態間でシームレスな視覚的遷移を実現でき、ナビゲーションを流動的でネイティブな感覚にできます。
提示词解读
这个提示词专注于演示浏览器原生的页面过渡动画技术，通过一个完整的交互示例，展示如何利用 View Transitions API 实现两个内容页之间的流畅切换效果。生成的代码通常包含页面导航组件、淡入淡出（crossfade）动画逻辑，以及核心的 API 调用方式，非常适合前端开发者快速上手这项相对较新的浏览器特性。
如果你正在构建单页应用或多页站点，希望告别生硬的页面跳转，这个提示词能帮你生成一份开箱即用的参考代码。将生成的结果粘贴到支持 View Transitions API 的现代浏览器环境中即可预览效果。你还可以在此基础上调整动画类型，比如把淡入淡出改为滑入滑出，或为不同元素设置独立的过渡样式，实现更丰富的视觉体验。推荐搭配 ChatGPT、Claude 或 GitHub Copilot 等代码能力较强的模型使用，并注明目标浏览器版本，以便模型给出兼容性更好的实现方案。
这个提示对您有帮助吗？
评论
评论将在审核后显示
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選