为何CSS动画仅正向渲染，反向无效果？ReactModal动画问题求助

嘿，我之前也碰到过完全一样的问题！ReactModal的关闭动画跑不起来，核心原因大多是组件在触发关闭后会立即被卸载，导致动画还没来得及执行就没了。结合你给出的代码片段，咱们一步步来理清楚问题和解决办法：

1. 最关键的配置：给ReactModal留足动画时间 #

ReactModal默认在关闭时会立刻移除DOM元素，所以你必须通过closeTimeoutMS属性告诉它：“等我的动画跑完再删我！”这个值要和你的动画时长完全匹配——比如你用了150ms的过渡，就设closeTimeoutMS={150}；如果是1s的动画，就设1000。

举个组件使用的例子：

<ReactModal
  isOpen={modalIsOpen}
  onRequestClose={handleClose}
  closeTimeoutMS={150} // 和你的transition时长一致
  contentLabel="Your Modal"
>
  {/* 模态框内容 */}
</ReactModal>

2. 检查你的CSS写法是否正确 #

从你给出的代码来看，你混用了transition和animation，这很容易出问题。咱们分两种情况修正：

如果你用Transition（推荐，更简单） #

把transition属性放在**基础类.ReactModal__Content**里，而不是只加在--after-open类里。这样关闭时的--before-close类才能继承过渡属性，执行反向动画：

/* 基础状态：初始透明 */
.ReactModal__Content {
  opacity: 0;
  transition: opacity 150ms ease-in-out; /* 把过渡放在基础类，确保关闭时也能触发 */
}

/* 打开后：完全显示 */
.ReactModal__Content--after-open {
  opacity: 1;
}

/* 关闭前：回到透明 */
.ReactModal__Content--before-close {
  opacity: 0;
}

如果你用Animation #

如果一定要用animation，记得定义关键帧，并且给--before-close类加上动画，同时用forwards让元素保持动画结束后的状态：

/* 定义淡入淡出关键帧 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.ReactModal__Content {
  opacity: 0;
}

.ReactModal__Content--after-open {
  animation: fadeIn 1s forwards;
}

.ReactModal__Content--before-close {
  animation: fadeOut 1s forwards;
}

3. 避坑提醒 #

• 不要用display: none或者visibility: hidden这类会立刻隐藏元素的属性来做关闭动画，它们会直接打断过渡/动画，只用opacity、transform这类支持过渡的属性。
• 检查有没有其他CSS规则覆盖了这些类的样式（比如父元素的overflow: hidden或者z-index问题）。
• 确保--before-close类确实被添加到了元素上，可以通过浏览器开发者工具查看DOM元素的类名变化。

按照上面的步骤调整后，你的关闭动画应该就能正常跑起来啦！

内容的提问来源于stack exchange，提问作者AnApprentice