必须写全 transition: opacity 0.3s ease；opacity: 0 需配 visibility: hidden 实现真正隐藏；js 控制需分帧触发，推荐操作 class；过渡时长宜选 0.25–0.4s。
transition: opacity 0.3s ease 必须写全，不能用 all
浏览器对 transition 的解析很严格：写成 transition: all 0.3s ease 看似省事，实则危险。它会把所有可动画属性（比如 color、border、transform）都纳入过渡，一旦这些属性在切换过程中有隐式变化（例如继承了父级文字颜色或边框），就会导致动画“抽搐”或延迟启动。更关键的是，首次显示时若没设初始 opacity，all 根本找不到“从哪开始变”。必须明确写成 transition: opacity 0.3s ease，且该声明要放在元素的默认状态（非 :hover、非 .show 类）里。
opacity: 0 和 visibility: hidden 要配对使用
只设 opacity: 0 不够——元素依然占位、能被点击、影响 tab 键导航。必须搭配 visibility: hidden 才真正“不可见且不可交互”。但注意：visibility 不支持过渡，一设就立刻生效。所以隐藏逻辑不能和 opacity 过渡混在同一时刻。正确做法是：淡出动画结束时监听 transitionend 事件，在回调里再设 visibility: hidden 或 display: none；淡入前则要先确保 visibility: visible 和 display: block（或其他合适值）已生效，否则 opacity 过渡压根不会触发。
JS 控制时别直接连写两行 style.opacity
常见错误：el.style.opacity = '0'; el.style.opacity = '1'; ——浏览器会合并渲染，中间帧被跳过，结果就是“一闪而过”。真正起作用的是让样式变更分帧发生。最轻量的办法是插一句 el.offsetHeight 在两句之间，强制触发重排；更推荐的做法是操作 class：el.classList.remove('show'); → el.offsetHeight; → el.classList.add('show');。如果元素是动态插入 DOM 的（比如 document.createElement 后 append），务必等挂载完成再操作 class，否则 transition 不会生效。
过渡时长选 0.25–0.4s，别用 0.1s 或 1.2s
人眼对动画节奏极其敏感。设成 0.1s 几乎看不出变化，等于没动；设成 1.2s 又拖慢交互节奏，用户会感知迟滞。实际项目中，0.25s 到 0.4s 是多数 UI 场景的舒适区间。另外，如果要淡出后收起高度（比如折叠面板），别指望 display 能过渡——它根本不支持动画。改用 max-height + overflow: hidden，但得预设一个足够大的 max-height 值（比如 max-height: 500px），否则收缩会卡顿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
