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

视图过渡动画演示 - View Transitions API

15
0
0
0

视图过渡动画演示

View Transitions API — 在DOM状态变化之间创建流畅的原生过渡动画，无需第三方库。

过渡风格：
42
步长：1
🌸

春日花语

樱花烂漫，春风拂面，万物复苏的季节。

无过渡（直接更新）
🍎
使用View Transition
🍎

左右两侧同时更新，直观感受View Transitions API带来的丝滑体验。

核心代码示例
document.startViewTransition() 
// 基本用法：在 startViewTransition 回调中更新 DOM
document.startViewTransition(() => {
  // 更新DOM —— 浏览器自动处理过渡
  document.getElementById('my-element').textContent = newValue;
});

// 配合 view-transition-name CSS 属性
// 给元素命名，让浏览器追踪它在新旧状态间的变化
// .my-element { view-transition-name: my-element; }
常见问题与知识点
什么是 View Transitions API？
View Transitions API 是一个浏览器原生API，允许在DOM状态变化时创建平滑的过渡动画。它通过捕获变化前后的页面快照，自动计算并执行过渡效果。核心方法是 document.startViewTransition()，配合CSS的 view-transition-name 属性来标记需要过渡的元素。API于Chrome 111（2023年3月）开始稳定支持。
哪些浏览器支持 View Transitions API？
目前 Chrome 111+、Edge 111+、Opera 97+ 以及基于Chromium的浏览器完全支持SPA内的View Transitions。Safari在2024年开始逐步支持（Safari 18+）。Firefox的支持正在开发中。跨页面（MPA）的View Transitions需要额外的 @view-transition CSS规则和导航触发，目前也在逐步推广中。建议使用特性检测：if (document.startViewTransition) { ... }。
view-transition-name 有什么作用？如何正确使用？
view-transition-name 是一个CSS属性，用于给DOM元素分配一个唯一的过渡标识名。当元素在新旧状态中拥有相同的名称时，浏览器会为它们创建独立的过渡动画（而不是默认的整体交叉淡入）。关键规则：在document中每个view-transition-name必须是唯一的。如果两个元素共用同一个名称，过渡会失败。在列表场景中，建议基于数据ID动态设置名称（如 item-{id}）。
如何自定义过渡动画的时长和效果？
可以通过CSS的 ::view-transition-old() 和 ::view-transition-new() 伪元素来自定义动画。例如：
::view-transition-old(root) { animation-duration: 0.6s; }
::view-transition-new(root) { animation-duration: 0.4s; animation-delay: 0.2s; }
还可以使用 ::view-transition-group() 调整整体的过渡时长和缓动函数。对于命名的过渡元素，在括号中指定名称即可。
SPA 和 MPA 中使用 View Transitions 有什么区别？
SPA（单页应用）：使用 document.startViewTransition(callback) 在JavaScript中包裹DOM更新，浏览器自动处理快照和过渡。
MPA（多页应用）：需要在CSS中使用 @view-transition { navigation: auto; } 规则，并在页面间使用相同的 view-transition-name。浏览器在导航时自动触发过渡。MPA方案更简单但灵活性较低，目前Chrome 126+开始支持。
View Transitions API 会影响性能吗？
API本身经过高度优化，过渡期间使用GPU加速。但需要注意：过渡时会创建页面快照（位图），对于大型复杂页面可能消耗额外内存（通常几MB）。过渡时长默认300ms，可在CSS中调整。对于频繁触发的过渡（如快速连续点击），API会自动跳过正在进行的过渡。建议对过渡元素使用 contain: paint 以优化快照性能。
实际开发中有哪些推荐的应用场景？
非常适合以下场景：
• 图片画廊 — 切换主图时的平滑过渡
• 列表排序/过滤 — 项目位置变化的动画
• 主题切换 — 亮/暗模式切换
• 数据仪表盘 — 数值更新、图表切换
• 电商产品页 — 产品图切换、规格选择
• 博客/新闻 — 文章卡片布局切换
• 多步骤表单 — 步骤间的过渡
🔧 相关工具