opacity动画需配合transition或animation才能平滑过渡，直接修改值会立即跳变；transition适合状态切换，animation适合多阶段时序控制；失效主因是display:none、overflow裁剪或js同步操作。
opacity动画必须配合transition才能平滑淡入淡出
直接改opacity值不会产生过渡效果，浏览器会立即跳变。关键不是“用不用animation”，而是“有没有触发过渡机制”。
- 最简方案是用
transition: opacity 0.3s ease;，然后通过JS切换class或伪类（如:hover）改变opacity - 如果要用
@keyframes，得显式定义from/to，且必须搭配animation属性触发，不能只靠样式变化 -
opacity: 0的元素仍占文档流、可被聚焦、能响应事件——这点常被忽略，需配合pointer-events: none和visibility: hidden才真正“退出交互”
transition和animation在淡入淡出上的核心区别
选哪个不看“高级感”，看控制粒度和触发方式：
-
transition适合状态切换：比如按钮悬停、菜单展开、表单验证提示显示/隐藏，依赖CSS状态变更（class增删、伪类、属性变化） -
@keyframes + animation适合时间轴明确的动效：比如加载指示器循环淡入淡出、多阶段入场动画（先淡入再上移），支持iteration-count、direction等精细控制 - 性能上两者都走合成层（只要不触发重排），但
transition更轻量；animation若设animation-fill-mode: forwards，结束帧会保留，而transition结束后样式回归原值
常见淡入淡出失效的三个原因
90%的问题不是写法错，而是被其他样式或DOM行为干扰：
-
display: none和opacity: 0混用：一旦display为none，transition直接失效，因为元素已脱离渲染树 - 父元素设置了
overflow: hidden且子元素有位移+透明度组合动画，可能因裁剪导致淡出“卡半截” - JS中同步设置
className又立刻改opacity，浏览器来不及触发transition——要加setTimeout(() => {}, 0)或用getComputedStyle强制重排
移动端Safari对opacity动画的兼容细节
iOS 15.4之前，纯opacity过渡在某些滚动场景下会掉帧，尤其配合position: fixed元素：
- 必须加
transform: translateZ(0)或will-change: opacity来启用GPU加速（注意will-change别滥用，仅对频繁动画的元素设） - 避免在
input获得焦点时触发淡入动画，Safari会强制暂停过渡以保障输入体验 - 用
prefers-reduced-motion媒体查询降级：@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }
淡入淡出看着简单，真正卡住人的往往是display和opacity的配合时机、移动端GPU加速的触发条件，还有那些没报错但就是不动的“静默失效”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
