无需登录 数据私有 本地保存

View Transition API 演练场 - 页面切换动画配置

15
0
0
0

View Transition API 演练场

可视化配置页面切换动画,实时预览并生成 CSS 代码

API 已支持 CSS + JS
您的浏览器不支持 View Transition API,预览将使用降级模式。
动画配置
100ms2000ms

命名元素过渡
预览中的 hero-imageitem-title 元素

0ms
0ms
演练场预览 · View Transition API Demo
过渡中...

🛍️ 探索产品

新品上市

智能运动手表 Pro

¥2,499 · 心率监测

🎧

轻量运动耳机

¥699 · IPX5防水

📱

折叠屏手机壳

¥199 · 磁吸设计

🔋

便携充电宝 20W

¥249 · 10000mAh

🖱️

人体工学鼠标

¥399 · 静音按键

返回列表
🎵

极光无线降噪耳机

这款旗舰级无线降噪耳机采用自适应降噪技术,可根据环境自动调整降噪强度。支持空间音频,带来沉浸式聆听体验。续航长达40小时,快充10分钟即可使用3小时。

主动降噪 空间音频 40h续航 蓝牙5.3 快充
¥1,299 ✓ 现货发售
生成的 CSS 代码
/* 请点击上方「应用配置并预览」生成代码 */

Q: 什么是 View Transition API?
View Transition API 允许在 DOM 状态变化时创建平滑的动画过渡。它通过捕获前后状态的快照,自动生成过渡动画,无需手动编写复杂的动画逻辑。目前主流浏览器(Chrome 111+、Edge 111+)已支持。

Q: 如何触发视图过渡?
使用 JavaScript 调用 document.startViewTransition(callback),在 callback 中更新 DOM。API 会自动捕获旧状态、执行回调、捕获新状态,然后在两者之间创建动画。

Q: 什么是 view-transition-name?
通过给元素设置 CSS 属性 view-transition-name,可以为该元素创建独立的命名过渡。同名元素在前后状态中会被自动关联,实现精准的元素级过渡动画。

Q: 核心 CSS 伪元素有哪些?
::view-transition-old(root) — 旧状态的根快照;::view-transition-new(root) — 新状态的根快照;::view-transition-group(root) — 过渡组容器。将 root 替换为命名即可针对特定元素。

Q: 如何自定义过渡动画?
通过覆盖上述伪元素的 animation 属性来替换默认的淡入淡出动画。可使用 @keyframes 定义任意动画效果。

Q: 浏览器不支持怎么办?
可通过检测 if ('startViewTransition' in document) 进行判断。在不支持的浏览器中,DOM 更新会立即生效,不会报错。建议结合 CSS @supports 进行渐进增强。