必须写全transition: opacity 0.3s ease，不能用all；因all会触发意外属性动画并导致首次动画失败，且需配合opacity: 0初始值和visibility: hidden防占位交互。
transition: opacity 0.3s ease 必须写全，不能只写 all
浏览器对 transition 的解析很严格：写成 transition: all 0.3s ease 看似省事，实则危险。它会让所有可动画属性（比如 color、margin、transform）都参与过渡，一旦这些属性在切换 class 时有隐式变化（例如父容器 font-size 变动导致子元素 line-height 微调），就会触发意外动画，造成“抽搐”或延迟启动。
更关键的是：首次显示时若没设初始 opacity，all 根本找不到“从哪开始变”，动画直接静默失败。
- 正确写法必须明确指定属性：
transition: opacity 0.3s ease; - 初值必须在默认状态（非
:hover、非.show）中声明：opacity: 0; - 推荐搭配
visibility: hidden;，防止透明元素仍占位、可点击
JS 控制淡入时为什么常“一闪而过”
直接写 el.style.opacity = '0'; el.style.opacity = '1'; 是无效的——浏览器把这两句合并为一次样式计算，中间没有渲染帧，过渡被跳过。
核心不是“改了没”，而是“浏览器没机会分两帧处理”。修复方式有两种：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 轻量方案：在两句之间插入强制重排语句，如
el.offsetHeight; - 更推荐方案：用 class 切换驱动，例如先
el.classList.remove('show');，再el.offsetHeight;，最后el.classList.add('show'); - 批量操作多个元素时，别用
for同步改style，否则全部同一帧开始；改用 CSS 的animation-delay或setTimeout错开起始时间
@keyframes fadeIn 要配 animation-fill-mode: forwards
定义动画时，@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } 只是描述过程，不控制结束状态。如果不加 animation-fill-mode: forwards，动画一结束就回退到 opacity: 0，肉眼看到的就是“闪一下又消失”。
但加了 forwards 后，opacity: 1 会保留，后续想再淡出就得手动覆盖或重新触发动画——这点容易被忽略。
- 应用时写法应为：
animation: fadeIn 0.4s ease-out forwards; - 慎用
animation-iteration-count: infinite做淡入淡出，视觉干扰强，且难以精确控制交互节奏 - 若需叠加位移（如淡入+上浮），
@keyframes比transition更灵活；但纯透明度变化，transition更轻量
淡出后怎么安全隐藏并释放空间
很多人同时设 opacity: 0 和 visibility: hidden，结果动画中途卡住——因为 visibility 不支持过渡，一设就立刻生效，opacity 过渡直接中断。
正确流程必须靠事件驱动：
- 监听
transitionend事件，且判断event.propertyName === 'opacity' - 在回调里再设
display: none或visibility: hidden，确保布局空间真正释放 - 禁用对
display做transition——它根本不支持动画，写了也白写 - 需要收起高度？可用
max-height+overflow: hidden，但得预设一个足够大的max-height值（如max-height: 500px），否则动画会生硬截断
0.1s 或 1.2s 都是错的——前者人眼几乎看不出变化，后者拖慢交互节奏；0.25–0.4s 才是多数 UI 场景的舒适区间。 
