transition失效主因是未显式定义初始值（如opacity: 0）和过渡声明（需写在常态规则中），且禁用transition: all；JS操作时须避免直接改style或提前设display:none，应监听transitionend后再隐藏。
直接用 opacity + transition 就能实现，但必须写对初始状态、过渡声明和收尾逻辑，否则动画不触发、卡顿或“一闪而过”。
为什么 transition: all 0.3s 常常失效
浏览器会把所有可动画属性（比如 color、border、transform）都纳入过渡计算，一旦这些属性在切换时意外变化，动画就抽搐或延迟启动。更关键的是：transition: all 在首次显示时找不到“起始值”——如果没显式设 opacity: 0，它根本不知道从哪开始变。
- 必须写全属性名：
transition: opacity 0.3s ease; - 初始状态（非
:hover或.show类）里必须有opacity: 0; - 隐藏时建议搭配
visibility: hidden;防占位、防点击，但注意它不支持过渡
JS 控制淡出时为什么“一闪而过”
写成 el.style.opacity = '0'; el.style.opacity = '1';，浏览器会合并渲染，跳过中间帧——它根本没机会动。
- 最轻量修复：在两句之间插一句强制重排，如
el.offsetHeight; - 更推荐操作 class：
el.classList.remove('show'); el.offsetHeight; el.classList.add('show'); - 批量处理多个元素时，别用
for同步改style，用 CSS 的animation-delay或setTimeout错开起始时间
淡出后怎么安全隐藏并释放空间
很多人同时设 opacity: 0 和 visibility: hidden，结果动画中途卡住——visibility 不支持过渡，一设就立刻生效，opacity 过渡直接中断。
立即学习“前端免费学习笔记（深入）”；
- 正确流程：监听
transitionend事件，等动画结束再设visibility: hidden或display: none -
display: none必须放在事件回调里，不能提前写；禁用对display做transition——它根本不支持动画 - 需要淡出后收起高度？可用
max-height+overflow: hidden，但得预设一个足够大的max-height值
真正容易被忽略的是过渡时长：0.1s 人眼几乎看不出变化，1.2s 又拖慢交互节奏；0.25–0.4s 是多数 UI 场景的舒适区间。
