CSS View Transitions API 详解

CSS View Transitions API 详解

一、View Transitions API 概述

CSS View Transitions API 是一个新的 Web API，用于在页面状态变化时创建平滑的过渡动画。它简化了复杂的页面过渡效果实现。

1.1 基本概念

• View Transition- 页面状态变化时的过渡效果
• Transition Pseudos- 过渡过程中的伪元素
• Named Views- 命名视图，用于精确控制过渡

二、基本用法

2.1 触发过渡

document.startViewTransition(() => { // 更新 DOM document.body.classList.add('dark-theme'); });

2.2 自定义过渡样式

::view-transition-old(root) { animation: fadeOut 0.3s ease-out; } ::view-transition-new(root) { animation: fadeIn 0.3s ease-out; } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

三、命名视图

3.1 定义命名视图

<div id="main-content" view-transition-name="main"> <!-- 内容 --> </div>

3.2 样式命名视图

::view-transition-old(main) { animation: slideOutLeft 0.4s ease-out; } ::view-transition-new(main) { animation: slideInRight 0.4s ease-out; } @keyframes slideOutLeft { from { transform: translateX(0); } to { transform: translateX(-100%); } } @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }

四、实战案例

4.1 页面切换动画

::view-transition-old(root) { animation: pageExit 0.5s ease-in-out; } ::view-transition-new(root) { animation: pageEnter 0.5s ease-in-out; } @keyframes pageExit { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.95); } } @keyframes pageEnter { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: scale(1); } }

4.2 列表项过渡

::view-transition-old(list-item) { animation: shrink 0.3s ease-out; } ::view-transition-new(list-item) { animation: grow 0.3s ease-out; } @keyframes shrink { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.8); } } @keyframes grow { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }

4.3 图片画廊过渡

::view-transition-old(gallery-image) { animation: fadeScaleOut 0.4s ease-out; } ::view-transition-new(gallery-image) { animation: fadeScaleIn 0.4s ease-out; } @keyframes fadeScaleOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.5); } } @keyframes fadeScaleIn { from { opacity: 0; transform: scale(1.5); } to { opacity: 1; transform: scale(1); } }

五、JavaScript 控制

5.1 监听过渡状态

const transition = document.startViewTransition(() => { // 更新 DOM }); transition.ready.then(() => { console.log('过渡动画即将开始'); }); transition.updateCallbackDone.then(() => { console.log('DOM 更新完成'); }); transition.finished.then(() => { console.log('过渡动画完成'); });

5.2 取消过渡

const transition = document.startViewTransition(() => { // 更新 DOM }); // 取消过渡 transition.abort();

六、兼容性处理

6.1 特性检测

if (!document.startViewTransition) { // 降级方案 updateDOM(); } else { document.startViewTransition(updateDOM); }

七、浏览器兼容性

八、总结

CSS View Transitions API 是创建页面过渡的现代方式：

1. 基本用法- document.startViewTransition()
2. 命名视图- view-transition-name 属性
3. 样式控制- ::view-transition-old/new 伪元素
4. JavaScript 集成- 监听过渡状态、取消过渡
5. 兼容性- 需要特性检测

合理使用可以创建流畅的页面过渡效果。