给index.html加页面过渡动画无通用解，因整页跳转时dom瞬间销毁导致transition失效；可行方案只有spa式局部替换或chrome111+的view transitions api。
直接给 index.html 加「页面过渡动画」没有通用解——浏览器整页跳转时 DOM 瞬间销毁，transition 根本没机会执行。所谓“平滑过渡”，实际只有两条可行路径：一是改造成单页应用（SPA）风格的局部内容替换，二是用 Chrome 111+ 的 View Transitions API 做原生导航过渡。
为什么给 body 写 transition 没用
很多人在 CSS 里写：body { transition: opacity 0.4s; }，再用 location.href = 'about.html' 跳转，结果动画完全不触发。原因很实在：
- 页面跳转瞬间，当前文档被浏览器强制卸载，所有样式、JS 上下文、DOM 节点全部清空
-
transition需要“属性值变化 + 元素持续存在”两个条件，缺一不可 -
display: none、visibility: hidden这类状态切换在跨页时无法保持上下文 - 即使用了
history.pushState，若没手动替换 DOM 内容，也只会更新 URL，不会触发动画
用 fetch + class 切换实现 MPA 风格过渡（兼容性最好）
这是目前最稳妥、覆盖 Safari/iOS/Chrome/Edge 的方案，核心是：服务端提供统一壳页，客户端用 fetch 加载目标页的 #content 片段，再手动替换并控制类名。
- 所有 HTML 页面（包括
index.html）必须共用相同结构：<div id="content"></div>，且不包含重复的或标签 - CSS 中避免
transition: all，显式声明可动画属性：.page-enter { opacity: 0; transform: translateY(10px); transition: opacity 0.3s, transform 0.3s; } - JS 替换内容后，**必须执行
void element.offsetWidth强制重排**，否则浏览器可能跳过首次动画 - 入场动画结束用
transitionend监听，且校验e.target === element，防止子元素冒泡干扰 - iOS Safari 下需额外加优化：
element.style.willChange = 'transform, opacity';，动画结束后立即移除
用 View Transitions API 实现真正跨页过渡（Chrome/Edge 111+）
这是唯一能原生支持从 index.html 到 about.html 平滑过渡的方案，但限制明确：
- 不能直接操作
document.body.innerHTML，必须由导航事件驱动（如<a href="about.html"></a>点击或location.href变更） - 必须用
document.startViewTransition(() => { location.href = 'about.html'; })包裹跳转逻辑 - 新旧页面中需有相同
view-transition-name的元素（如<img view-transition-name="hero">），否则回退为硬切 - 不支持 SSR 直出页面；iframe 内容不参与过渡；Safari 和 Firefox 当前不支持
- CSS 中通过
::view-transition-old(hero)和::view-transition-new(hero)定制动画，不能用普通类名
最易被忽略的一点：动画是否生效，和你写的 CSS 是否“完整”关系不大，而取决于 DOM 是否真实共存、状态是否被浏览器识别为可过渡。很多失效案例，根源是没意识到「页面跳转」和「内容切换」是两回事——前者浏览器管销毁，后者你得自己管生命周期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
