最常见原因是未在默认状态中显式声明opacity初始值，且transition未写在基础类中；必须同时满足：opacity有明确起始值（如opacity: 0）、transition写在常态规则里、搭配visibility避免占位问题。
transition 为什么写了 opacity 却没动画
最常见的情况是：CSS 里漏写了 opacity 的初始值，或者 transition 声明不完整。浏览器不会“猜”你从哪开始过渡——它只按已声明的默认状态执行。比如只写 transition: opacity 0.3s，但元素默认没设 opacity: 0，那首次显示就是直接跳到 1，根本没起点。
必须同时满足三点：
-
opacity初始值在默认状态（非:hover、非.active）中明确声明，例如.tab-pane { opacity: 0; } -
transition显式写出属性名和时长：transition: opacity 0.3s ease, visibility 0.3s;（不能用all） - 搭配
visibility: hidden和visibility: visible，否则透明元素仍占位、可聚焦、读屏器可读
JS 切换标签页时动画一闪而过或失效
直接写 el.style.opacity = '0'; el.style.opacity = '1'; 是无效的。浏览器把这两句合并成一次样式计算，中间没有渲染帧，过渡被跳过。
推荐做法是用 class 控制状态，而不是直改 style：
- 先统一移除所有面板的
active类：document.querySelectorAll('.tab-pane.active').forEach(el => el.classList.remove('active')) - 再给目标面板加类：
document.getElementById(targetId).classList.add('active') - CSS 中定义：
.tab-pane { opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s; } .tab-pane.active { opacity: 1; visibility: visible; }
为什么不能用 display: none 配合 transition
display 属性本身不支持 CSS 过渡，写了也白写。更严重的是，display: none 会让元素彻底退出布局流，opacity 就失去作用对象——浏览器连“从 0 变到 1”的起点都找不到。
替代方案必须保留元素在文档流中：
- 用
visibility: hidden+opacity: 0实现视觉隐藏但保留占位 - 淡出完成后，在
transitionend事件中处理真正释放空间的操作：if (e.propertyName === 'opacity') el.style.display = 'none'; - 如果要收起高度，可用
max-height+overflow: hidden，但得预设一个具体值（如max-height: 250px），不能用auto
移动端卡顿或滑动不流畅怎么办
仅靠 opacity 在低端设备上容易掉帧，尤其快速切换时。真正顺滑的方案是改用 transform 触发硬件加速：
- 父容器加
overflow: hidden，防止滑动溢出 - 每个面板设
position: absolute，并统一will-change: transform - 默认状态：
transform: translateX(0)；非激活页：transform: translateX(-100%)或translateX(100%) - 动画时间控制在
0.25s–0.35s，太短感知不到，太长拖慢交互
注意：别忘了同步更新 z-index 或 DOM 顺序，确保新面板始终在最上层——否则可能看到旧内容从新内容下方“钻出来”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
