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

CSS视图过渡(View Transitions)详解创建平滑页面切换一、什么是View TransitionsView 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 classavatar styleview-transition-name: avatar img srcavatar.jpg altAvatar /div2.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(() { // 过渡完成后 });五、浏览器兼容性属性ChromeFirefoxSafariEdgeView Transitions✅✅✅✅总结View Transitions API提供了强大的页面过渡能力。通过合理使用可以创建平滑的用户体验。关键要点startViewTransition()触发过渡::view-transition-old旧元素样式::view-transition-new新元素样式view-transition-name命名过渡元素ready/finished过渡生命周期继续探索View Transitions的更多用法创造精美的页面切换效果。