opacity渐入渐出不触发，因display:none禁用动画；须用opacity+visibility控制，配合animationend事件清理状态并避免重复触发。
animation + opacity 做渐入渐出，为什么有时不触发？
因为 opacity 从 0 到 1 的过渡，必须配合 animation 显式声明关键帧，且元素初始状态不能是 display: none —— 这个被很多人忽略。浏览器不会对 display: none 的元素执行动画，哪怕你后来切回 block，也不会补帧。
正确做法是：始终用 opacity 控制可见性，用 visibility: hidden/visible 配合处理事件响应和布局占位（比如防止点击穿透）。
-
display: none→ 动画完全失效，opacity变化不渲染 -
visibility: hidden+opacity: 0→ 可动画、不响应交互、保留布局空间 - 如果要彻底移除交互，得在
animationend后手动加pointer-events: none
写一个可复用的 fade-in / fade-out @keyframes
别每次重写 @keyframes，直接定义两套基础规则，用 animation-name 切换就行。注意：IE10+ 支持 @keyframes，但必须带 -ms- 前缀（仅限 IE10），现代项目可忽略；Safari 旧版需 -webkit- 前缀（iOS 9.3+/macOS 10.11+ 已无需）。
/* 推荐写法，兼容主流环境 */<br>@keyframes fade-in {<br> from { opacity: 0; }<br> to { opacity: 1; }<br>}<br>@keyframes fade-out {<br> from { opacity: 1; }<br> to { opacity: 0; }<br>}
- 不要写
0% { opacity: 0 }和100% { opacity: 1 }——from/to更简洁，语义更准 - 如果需要淡出后隐藏元素，**不能**靠动画本身删 DOM，得监听
animationend事件再操作 - 避免在
fade-out动画里同时改height或margin—— 会触发 layout，影响性能
JavaScript 控制动画播放时机，怎么避免重复触发？
用户快速点击“显示/隐藏”按钮时，opacity 动画可能叠加、卡顿甚至反向跳变。根本原因是：CSS 动画不自动取消前序，新 animation-name 赋值不会中断正在跑的动画。
- 每次触发前先清除已有动画：
el.style.animation = 'none'，再offsetHeight强制重排，最后赋新值 - 更稳妥的做法是用
getComputedStyle(el).animationName判断是否已在动画中，避免无谓重置 - 淡出结束想移除元素？监听
animationend，但注意事件只触发一次，且需过滤掉undefined或空字符串的animationName - 别用
setTimeout模拟时长 —— 和 CSSanimation-duration不同步，容易错拍
移动端 Safari 上 opacity 动画卡顿怎么办？
老版本 iOS Safari（iOS 12 及之前）对非 transform + opacity 组合的动画优化差，尤其在 position: fixed 或有 will-change: transform 的父容器里，opacity 单独动可能掉帧。
- 强制开启硬件加速：
will-change: opacity（仅在动画期间加，结束后移除） - 或退一步：用
transform: scale(0.99)配合opacity，骗过渲染管线（慎用，可能影响可访问性） - 检查是否有
backface-visibility: hidden冲突 —— 它会让opacity动画降级到软件渲染 - 真卡顿？换
transition：它比animation更轻量，适合简单显隐
实际项目里最容易漏的是：淡出动画结束后没清掉 opacity: 0，导致后续 JS 判断 getBoundingClientRect() 或 offsetHeight 出错；或者忘了在淡入前把 visibility 设回 visible，结果动画播了但元素还是不可见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
