CSS 视图过渡完全指南

CSS 视图过渡完全指南引言CSS 视图过渡View Transitions是一个强大的新特性它允许开发者创建平滑的页面过渡动画。本文将深入探讨视图过渡的各种用法和高级技巧。基础概念回顾什么是视图过渡视图过渡 API 允许你在 DOM 状态变化时创建平滑的过渡动画。它自动捕获新旧状态的快照并在它们之间创建过渡。基本用法document.startViewTransition(() { // 更改 DOM updateDOM(); });高级技巧一基本过渡简单过渡async function navigateToPage(page) { await document.startViewTransition(() { document.body.innerHTML getPageContent(page); }); }带回调的过渡const transition document.startViewTransition(() { updateContent(); }); transition.finished.then(() { console.log(过渡完成); });高级技巧二命名过渡使用 view-transition-name.target-element { view-transition-name: my-element; }document.startViewTransition(() { // 更新目标元素 });自定义过渡样式::view-transition-new(my-element) { animation: slide-in 0.5s ease-out; } ::view-transition-old(my-element) { animation: fade-out 0.3s ease-in; } keyframes slide-in { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }高级技巧三过渡类型淡入淡出::view-transition-group(root) { animation-duration: 0.5s; } ::view-transition-new(root) { animation: fade-in 0.5s ease-out; } ::view-transition-old(root) { animation: fade-out 0.5s ease-out; } keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }滑动过渡::view-transition-new(root) { animation: slide-from-right 0.4s ease-out; } ::view-transition-old(root) { animation: slide-to-left 0.4s ease-out; } keyframes slide-from-right { from { transform: translateX(100%); } to { transform: translateX(0); } } keyframes slide-to-left { to { transform: translateX(-100%); } }缩放过渡::view-transition-new(root) { animation: scale-in 0.4s ease-out; } ::view-transition-old(root) { animation: scale-out 0.4s ease-out; } keyframes scale-in { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } } keyframes scale-out { to { transform: scale(1.2); opacity: 0; } }高级技巧四自定义过渡圆形揭示::view-transition-new(root) { animation: circle-reveal 0.6s ease-out; } keyframes circle-reveal { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(150% at 50% 50%); } }对角线滑动::view-transition-new(root) { animation: diagonal-slide 0.5s ease-out; } keyframes diagonal-slide { from { transform: translate(-100%, -100%); opacity: 0; } to { transform: translate(0, 0); opacity: 1; } }实战案例页面导航过渡.page-transition { view-transition-name: page; } ::view-transition-new(page) { animation: page-in 0.5s ease-out; } ::view-transition-old(page) { animation: page-out 0.4s ease-in; } keyframes page-in { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } keyframes page-out { to { transform: translateX(-50%); opacity: 0; } }async function navigateTo(pageId) { const currentPage document.querySelector(.active-page); const nextPage document.getElementById(pageId); currentPage.classList.remove(active-page); nextPage.classList.add(active-page); await document.startViewTransition(() { document.body.classList.add(page-${pageId}); }); }实战案例列表项过渡.list-item { view-transition-name: list-item-attr(id); } ::view-transition-new(list-item-*) { animation: item-in 0.3s ease-out; } ::view-transition-old(list-item-*) { animation: item-out 0.2s ease-in; } keyframes item-in { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } } keyframes item-out { to { transform: scale(0.8); opacity: 0; } }实战案例模态框过渡.modal { view-transition-name: modal; } ::view-transition-new(modal) { animation: modal-in 0.3s ease-out; } ::view-transition-old(modal) { animation: modal-out 0.2s ease-in; } keyframes modal-in { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } keyframes modal-out { to { transform: scale(0.9); opacity: 0; } }常见问题与解决方案Q1浏览器兼容性A现代浏览器支持视图过渡Chrome 111Edge 111Safari 16.4 (部分支持)Firefox 113 (部分支持)Q2如何检测支持A使用特性检测if (startViewTransition in document) { // 支持视图过渡 } else { // 降级方案 }Q3如何取消过渡A使用 skipTransitionconst transition document.startViewTransition(() { updateContent(); }); // 取消过渡 transition.skipTransition();最佳实践1. 使用语义化命名/* 推荐 */ .main-content { view-transition-name: main-content; } /* 不推荐 */ .div-1 { view-transition-name: a; }2. 合理使用过渡时长/* 推荐 */ ::view-transition-group(root) { animation-duration: 0.3s; } /* 不推荐 */ ::view-transition-group(root) { animation-duration: 2s; }3. 提供降级方案// 推荐 if (startViewTransition in document) { await document.startViewTransition(updateDOM); } else { updateDOM(); }总结CSS 视图过渡是创建平滑页面过渡的强大工具。通过本文的学习你应该能够创建基本视图过渡使用命名过渡创建自定义过渡动画实现页面导航过渡处理浏览器兼容性掌握这些技巧能够帮助你创建更加流畅和吸引人的用户体验。