CSS View Transitions：页面切换的视觉魔法

CSS View Transitions页面切换的视觉魔法用 View Transitions API 打造电影级的页面切换效果。一、什么是 View Transitions作为一名把动画视为页面呼吸节拍的 UI 匠人View Transitions API 是我近期最兴奋的新特性。它让我们能够在页面状态变化时创建流畅的过渡动画——就像电影场景切换一样自然。二、基础用法1. 简单的视图过渡// 在页面切换时触发动画 document.startViewTransition(() { // 更新 DOM updatePageContent(); });2. CSS 控制过渡/* 默认的进入和退出动画 */ ::view-transition-old(root) { animation: fade-out 0.3s ease; } ::view-transition-new(root) { animation: fade-in 0.3s ease; } keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }三、命名视图过渡1. 为元素命名.card-image { view-transition-name: card-image; } .card-title { view-transition-name: card-title; }2. 完整的过渡示例!-- 列表页 -- div classcard-list article classcard onclickshowDetail(1) img classcard-image srcimage1.jpg alt h2 classcard-title标题一/h2 /article /div !-- 详情页 -- div classdetail-page styledisplay: none; img classcard-image srcimage1.jpg alt h1 classcard-title标题一/h1 p详细内容.../p /divfunction showDetail(id) { document.startViewTransition(() { document.querySelector(.card-list).style.display none; document.querySelector(.detail-page).style.display block; }); }3. 自定义动画/* 图片的过渡效果 */ ::view-transition-old(card-image), ::view-transition-new(card-image) { animation: image-transition 0.5s cubic-bezier(0.4, 0, 0.2, 1); height: 100%; object-fit: cover; } keyframes image-transition { from { clip-path: inset(0 0 0 0); transform: scale(0.8); } to { clip-path: inset(0 0 0 0); transform: scale(1); } } /* 标题的过渡效果 */ ::view-transition-old(card-title) { animation: title-out 0.3s ease-out; } ::view-transition-new(card-title) { animation: title-in 0.3s ease-in 0.2s both; } keyframes title-out { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-20px); opacity: 0; } } keyframes title-in { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }四、高级技巧1. 页面导航过渡// 监听导航点击 document.addEventListener(click, (e) { if (e.target.tagName A e.target.href) { e.preventDefault(); const href e.target.href; document.startViewTransition(async () { // 加载新页面内容 const response await fetch(href); const html await response.text(); document.body.innerHTML html; // 更新 URL history.pushState({}, , href); }); } });2. 状态切换动画// 切换主题 document.querySelector(.theme-toggle).addEventListener(click, () { document.startViewTransition(() { document.documentElement.classList.toggle(dark); }); }); // 切换布局 document.querySelector(.layout-toggle).addEventListener(click, () { document.startViewTransition(() { document.querySelector(.grid).classList.toggle(list); }); });3. 自定义过渡时间/* 控制整个过渡的时间 */ ::view-transition { duration: 0.5s; } /* 控制特定元素的过渡 */ ::view-transition-group(card-image) { duration: 0.8s; delay: 0.2s; }五、性能优化减少重绘只对必要的元素设置 view-transition-name合理使用动画避免过度复杂的动画效果测试性能在低端设备上测试动画流畅度降级方案为不支持的浏览器提供基本体验六、浏览器支持// 检测支持情况 if (startViewTransition in document) { // 支持 View Transitions useViewTransitions(); } else { // 降级到传统方法 useFallbackTransitions(); }七、最佳实践语义化命名使用有意义的 view-transition-name渐进增强确保无动画时功能正常用户控制提供减少动画的选项测试场景测试各种页面切换场景View Transitions 让页面切换不再是生硬的跳转而是优雅的视觉叙事。#css #view-transitions #animation #frontend #ux