点击此卡片触发过渡动画
View Transitions API是现代浏览器提供的原生API，用于创建页面状态变化时的平滑过渡动画。它自动截取新旧状态的快照，通过CSS动画实现过渡效果，无需手动管理动画帧。
document.startViewTransition()，在同页面内更新DOM时触发过渡<meta name="view-transition" content="same-origin">启用，在跨页面导航时自动触发::view-transition - 过渡根容器::view-transition-group(name) - 过渡组::view-transition-old(name) - 旧状态快照::view-transition-new(name) - 新状态快照Chrome 111+支持SPA过渡，Chrome 126+支持MPA过渡。Firefox和Safari正在开发中。
View Transitions API是浏览器原生API，用于创建页面状态变化时的平滑过渡动画。它自动截取新旧状态的快照，通过CSS动画实现过渡效果，无需手动管理动画帧。支持同页面DOM更新和跨页面导航两种模式。
SPA（单页应用）过渡使用document.startViewTransition()方法，在同页面内更新DOM时触发。MPA（多页应用）过渡通过meta标签启用，在页面导航时自动触发。SPA过渡需要手动调用API，MPA过渡由浏览器自动处理。
View Transitions API在Chrome 111+中支持同页面过渡，Chrome 126+中支持跨页面过渡。Firefox和Safari正在开发中。建议使用特性检测并提供回退方案。
使用::view-transition-old和::view-transition-new伪元素自定义动画。可以设置animation-duration、animation-timing-function等属性。通过view-transition-name为特定元素指定独立的过渡效果。
完全安全。所有代码生成在浏览器本地完成，不发送任何数据到服务器，不存储任何信息。关闭页面后数据自动清除。