浏览器不触发display切换动画因强制重排，transition须写在基础选择器且显式定义起止值；opacity+transform最稳，需配合visibility和contain优化；JS需用transitionend监听或状态锁防连点错乱；View Transitions要求name配对、DOM同步更新。
为什么直接改 display 或 class 就没动画
浏览器对 display: none 切换完全不触发 transition，它属于强制重排行为；而只在 .active 类里写 transition 也不行——移除类时，transition 属性随类一起消失，旧状态“没机会被记录”。动画必须靠浏览器拍下“前一帧”和“后一帧”，中间得有可比对的样式快照。
正确做法是：transition 声明必须写在基础选择器上（比如 .tab-panel），且初始状态要显式定义 opacity 和 transform 值。常见错误包括：
- 用
height或max-height做过渡 → 触发重排、卡顿、高度计算不准导致突变 - 把
transition写在.tab-panel.active里 → 首次显示有动画，退出时静默硬切 - 没设
visibility: hidden配合opacity: 0→ 透明元素仍占位、可点击
用 opacity + transform 实现稳定切换
这是兼容性最好、性能最稳的组合，所有现代浏览器都支持硬件加速，且不会引发布局抖动。关键不是“加了 transition”，而是起止值是否可动画、是否被浏览器识别为变化。
最小可行 CSS 示例：
.tab-panel {
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.tab-panel.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
注意点：
- 务必给容器加
contain: layout style paint，缩小重排影响范围 - 如果父容器滚动或有定位上下文，加
will-change: transform提前升层 - 不要用
transition: all—— 它会让 margin、color 等隐式变化也参与动画，造成抽搐
JS 控制时如何避免快速连点错乱
用户猛点两个标签，可能上一个动画还没结束，下一个 classList.add('active') 就覆盖了状态，结果两个面板同时显示，或都消失。这不是逻辑问题，是时机问题。
推荐做法是用状态锁 + transitionend 监听：
- 切换前检查当前激活面板是否还在动画中：
getComputedStyle(panel).opacity === '0' - 给退出面板监听一次
transitionend，{ once: true }，回调里再插入新内容 - 用
el.classList.toggle('active', true)替代手动增删，保证原子性 - 简单场景可用布尔锁：
let isTransitioning = false，进函数先判断，设为true，动画结束再设回false
View Transitions API 的坑在哪
它不是“给标签页加个动画”的快捷键，而是要求你严格控制 DOM 更新节奏。90% 的失败都出在 view-transition-name 没配对，或旧元素提前不可见。
实操要点：
- 每个待过渡的标签面板内对应标题/内容区域，都要带相同
style="view-transition-name: tab-title"（大小写敏感、不能拼接变量） - 调用
document.startViewTransition(() => { container.replaceChildren(newPanels); })，newPanels 必须是已生成好、带完整 view-transition-name 的 DOM 片段 - 旧面板在调用前不能是
opacity: 0或visibility: hidden—— 否则快照捕获不到，只剩新内容淡入 - 调试时打开 DevTools → Layers 面板，确认是否出现
::view-transition-old(tab-title)图层；没有，基本就是 name 不一致或元素未挂载
最容易被忽略的是：View Transitions 只对同步 DOM 更新生效，如果你在 startViewTransition 回调里还去 fetch 数据或等 Promise，动画就直接失效。数据必须提前就绪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
