本文介绍如何通过 CSS transition 替代 @keyframes + animation，实现元素展开（open）与收起（close）双向平滑滑入/滑出效果，避免 display: none 导致的动画中断问题。
本文介绍如何通过 css `transition` 替代 `@keyframes + animation`，实现元素展开（open）与收起（close）双向平滑滑入/滑出效果，避免 `display: none` 导致的动画中断问题。
在 React（或其他前端框架）中控制元素显隐时，一个常见误区是：使用 display: none/block 配合一次性 animation 实现“打开动画”，却无法自然触发“关闭动画”。根本原因在于：display: none 会立即从渲染树中移除元素，导致所有 CSS 动画和过渡被强制终止，且无法逆向播放。即使设置 animation-direction: reverse，也无法挽救已被销毁的动画上下文。
正确的解法是放弃 display 切换，改用基于可过渡属性（如 left、transform、opacity、max-height）的 CSS transition。它天然支持正向与反向过渡——只要属性值发生变化，浏览器就会自动补间动画，无论状态是从 open → closed 还是 closed → open。
以下是一个简洁、可靠、无需 JavaScript 监听或 class 切换延迟的实现方案：
.slide-panel {
position: absolute;
left: -100vw; /* 初始位置：完全在视口左侧 */
transition: left 1s ease-out; /* 关键：启用 left 的过渡 */
}
.slide-panel.open {
left: 0; /* 目标位置：滑入视口左边缘 */
}<div className={`slide-panel ${open ? 'open' : ''}`}>
This slides open when state is changed to open.
</div>✅ 优势说明：
立即学习“前端免费学习笔记（深入）”；
- ✅ 双向动画：open = true → left 从 -100vw → 0（滑入）；open = false → left 自动从 0 → -100vw（滑出）；
- ✅ 无 JS 干预：纯 CSS 驱动，响应式强，性能高；
- ✅ 兼容性好：transition 支持所有现代浏览器及 IE10+；
- ✅ 可扩展：如需叠加淡入效果，可同时过渡 opacity：
transition: left 1s ease-out, opacity 0.3s ease-in; opacity: 0; &.open { opacity: 1; }
⚠️ 重要注意事项：
- ❌ 避免在 .slide-panel 上设置 display: none —— 它会破坏过渡。若需彻底隐藏（如 SEO 或无障碍），可用 visibility: hidden + pointer-events: none 辅助，但仅在动画完全结束后应用（例如通过 transitionend 事件或 useEffect 延迟设置）；
- ✅ 推荐使用 transform: translateX() 替代 left（更高效，触发 GPU 加速）：
.slide-panel { transform: translateX(-100vw); transition: transform 1s ease-out; } .slide-panel.open { transform: translateX(0); } - ✅ 若容器有布局影响，确保父元素 position: relative 或合理定位上下文，避免绝对定位元素脱离文档流引发布局跳动。
总结：CSS 动画（animation）适合定义一次性、复杂时序的动作；而状态切换类交互动画（如展开/折叠、显示/隐藏）应优先选用 transition —— 它语义清晰、双向自然、维护成本低，是构建流畅 UI 的基石方案。
