CSS渐入渐出动画制作详解

本文深入解析了CSS中实现流畅渐入渐出动画的核心要点与常见陷阱：明确指出`display: none`会彻底禁用动画，必须改用`opacity`结合`visibility`控制显隐，并通过`animationend`事件精准清理状态、防止重复触发；提供了简洁可复用的`@keyframes fade-in/fade-out`标准写法及跨浏览器兼容建议；同时揭示了JavaScript控制时的竞态问题（如快速点击导致动画叠加）、移动端Safari卡顿的根源（如缺少硬件加速）及优化方案（如`will-change: opacity`或轻量`transition`替代），并强调了实际开发中极易忽略的关键细节——淡出后未重置`opacity`或`visibility`引发的DOM判断错误和交互异常，堪称一份兼顾原理、实践与避坑的高实用性前端动画指南。

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+ 已无需）。

/* 推荐写法，兼容主流环境 */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

• 不要写 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 模拟时长 —— 和 CSS animation-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，结果动画播了但元素还是不可见。

以上就是《CSS渐入渐出动画制作详解》的详细内容，更多关于的资料请关注golang学习网公众号！