直接用opacity+transition就能实现淡入淡出，无需js；但必须写全transition: opacity 0.3s ease;，初始状态设opacity: 0，搭配visibility: hidden防占位交互，ie9+原生支持。
直接用 opacity + transition 就能实现，不需要 JS 也能跑通；但写错一行声明，动画就完全不触发。
为什么 transition: all 0.3s 不行
浏览器会把所有可动画属性都纳入过渡，比如意外触发 color、border 或 transform 的变化，导致动画“抽搐”或延迟启动。更关键的是：首次显示时若没设初始 opacity，all 根本找不到“从哪开始变”。
-
transition必须写全属性名：transition: opacity 0.3s ease; - 初始状态（非
:hover/.show）里必须有opacity: 0; - 隐藏时建议搭配
visibility: hidden;，否则透明元素仍占位、可点击 - IE9+ 原生支持，不用 fallback
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 场景的舒适区间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
