字幕应使用 position: absolute 叠放于 position: relative 容器内，统一 top: 0; left: 0;，并默认声明 opacity: 0 和 transition: opacity 0.3s ease-in-out，通过 class 切换控制显隐，淡出后须监听 transitionend 事件再操作 display 或 visibility。
字幕元素必须用 position: absolute 叠放
HTML 里没有原生“字幕标签”，通常用 <div> 或 <code><p></p> 模拟字幕，但若不叠在一起，淡入淡出会撑开页面、导致布局跳动。常见错误是让每行字幕按文档流排列，结果动画时高度反复变化。
正确做法：所有字幕包裹在同一个容器内，每个字幕元素设 position: absolute，并统一 top: 0; left: 0;。这样它们视觉上重叠，opacity 切换才不会影响其他内容。
- 容器需设
position: relative，否则 absolute 会相对 body 定位 - 避免用
visibility: hidden或display: none控制显隐——前者不触发过渡，后者直接中断动画 - 若字幕行高不一致，建议统一
line-height和min-height防止上下抖动
transition: opacity 必须写在默认状态里
很多人把 transition: opacity 0.3s ease 写在 .show 类里，结果首次加载或切换时动画完全不触发。浏览器需要明确的“起点”，而这个起点只能来自未加类的默认样式。
正确写法是：默认状态就声明 opacity: 0 和 transition: opacity 0.3s ease-in-out；再用类（如 .active）只改 opacity: 1。
立即学习“前端免费学习笔记（深入）”；
- 禁用
transition: all 0.3s ease——它会让 margin、color 等隐式变化也参与过渡，造成抽搐 - 不要靠 JS 注入初始 opacity 值后再加 transition，浏览器只认 CSS 已解析的初始状态
- 过渡时长建议控制在
0.25s–0.4s，太短看不出效果，太长拖慢节奏
JS 控制时别直接连写两行 style.opacity
el.style.opacity = '0'; el.style.opacity = '1'; 这种写法几乎必然失败。浏览器会合并这两次样式变更，在同一渲染帧完成，中间没有机会触发过渡。
真正起作用的是“让浏览器分两帧处理”。轻量方案是插入强制重排语句；更推荐用 class 切换，交由 CSS 自动管理状态。
- 可行方案：先
el.classList.remove('active')，再读取el.offsetHeight，最后el.classList.add('active') - 避免用
setTimeout(() => ..., 0)处理单个元素——它依赖事件循环，不如重排可靠 - 批量控制多行字幕时，别用 for 循环同步改 style，应改用 CSS 的
animation-delay错开起始时间
淡出后必须监听 transitionend 才能安全隐藏
很多人想“淡出后彻底释放空间”，就同时写 opacity: 0 和 visibility: hidden，结果动画中途卡住。因为 visibility 不支持过渡，一设就立刻生效，opacity 过渡直接被截断。
真正安全的做法是等动画自然结束，再操作 DOM 或布局属性。关键不是“怎么设”，而是“什么时候设”。
- 必须监听
transitionend事件，且检查event.propertyName === 'opacity'，防止其他过渡干扰 - 需要释放空间时，
display: none必须放在事件回调里，不能提前写 - 如果要收起高度，可用
max-height+overflow: hidden，但得预设一个足够大的max-height值（比如max-height: 200px）
:hover）或媒体查询隔离——否则浏览器找不到“已知起点”，动画就静默失效。
