标签无法实现淡入淡出，因其仅为元数据声明，不生成可操作DOM；需用JavaScript解析WebVTT并注入带transition的自定义div覆盖层，同时注意pointer-events、z-index及iOS渲染兼容性。
直接用 <track></track> 标签无法实现淡入淡出——它只是字幕的容器声明，不参与渲染动画。真正起作用的是浏览器内置字幕渲染层（WebVTT 渲染器），它默认不响应 CSS transition，也不暴露可操作的 DOM 节点。
为什么 <track></track> 本身不能加 transition
HTML 的 <track kind="subtitles"></track> 是一个“元数据标签”，只告诉浏览器：“这里有字幕文件，请按需加载并渲染”。实际字幕文字由浏览器内部合成到视频画面上，不生成可选中的 <div> 或 <code><span></span>，因此你写 .track { opacity: 0; transition: opacity 0.3s; } 完全无效。
可行方案：用自定义字幕层覆盖视频
绕过原生 <track></track>，改用 JavaScript 解析 WebVTT 文件，把字幕文本动态注入一个带类名的 <div> 层，并控制它的 <code>opacity 和 visibility：
- 监听
video的timeupdate事件，实时匹配当前时间戳对应的字幕条目 - 将匹配到的文本插入到一个绝对定位的
<div class="subtitle-overlay"> 中 <li>CSS 中为该 <code><div> 设置 <code>opacity: 0初始态 +transition: opacity 0.25s ease - 在 JS 插入新文本时，先设
opacity: 0，再强制重排（如读取offsetHeight），最后设opacity: 1触发淡入；旧字幕可监听transitionend后清空或设为opacity: 0 - 设置
pointer-events: none，否则会拦截视频点击/拖拽 -
z-index明确高于视频，但低于可能的控制栏（如播放按钮） - 若视频启用了
playsinline或在 iOS Safari 中运行，需额外加-webkit-transform: translateZ(0)防止渲染层错位
pointer-events 和 z-index 容易被忽略
自定义字幕层必须确保：
立即学习“前端免费学习笔记（深入）”；
真正难的不是让字幕“动起来”，而是精准对齐时间轴、处理多语言切换、适配不同字体大小缩放——这些细节一旦漏掉，淡入淡出就会卡顿或错位。
