CSS视图过渡(View Transitions)详解：创建平滑页面切换

一、什么是View Transitions

View Transitions API允许你在DOM变化时创建平滑的过渡动画。

1.1 基本用法

document.startViewTransition(() => { // DOM变化 document.body.classList.add('dark'); });

1.2 CSS配置

::view-transition { duration: 0.5s; easing: ease-in-out; } ::view-transition-old(root) { animation: fade-out 0.5s ease-in-out; } ::view-transition-new(root) { animation: fade-in 0.5s ease-in-out; } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

二、命名过渡

2.1 定义命名元素

<div class="avatar" style="view-transition-name: avatar"> <img src="avatar.jpg" alt="Avatar"> </div>

2.2 CSS样式

::view-transition-old(avatar) { animation: slide-left 0.5s ease-in-out; } ::view-transition-new(avatar) { animation: slide-right 0.5s ease-in-out; } @keyframes slide-left { from { transform: translateX(0); } to { transform: translateX(-100%); } } @keyframes slide-right { from { transform: translateX(100%); } to { transform: translateX(0); } }

三、实战应用

3.1 页面切换动画

// 导航时触发过渡 async function navigateTo(url) { await document.startViewTransition(async () => { // 加载新页面内容 const response = await fetch(url); const html = await response.text(); document.documentElement.innerHTML = html; }); }

3.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 { transform: scale(1); opacity: 1; } to { transform: scale(0); opacity: 0; } } @keyframes grow { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }

3.3 模态框过渡

::view-transition-old(modal) { animation: modal-close 0.3s ease-out; } ::view-transition-new(modal) { animation: modal-open 0.3s ease-out; } @keyframes modal-open { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

四、自定义过渡

const transition = document.startViewTransition(() => { // DOM变化 }); transition.ready.then(() => { // 过渡开始前 }); transition.finished.then(() => { // 过渡完成后 });

五、浏览器兼容性

总结

View Transitions API提供了强大的页面过渡能力。通过合理使用，可以创建平滑的用户体验。

关键要点：

1. startViewTransition()：触发过渡
2. ::view-transition-old：旧元素样式
3. ::view-transition-new：新元素样式
4. view-transition-name：命名过渡元素
5. ready/finished：过渡生命周期

继续探索View Transitions的更多用法，创造精美的页面切换效果。