React-Transition-Group 在添加 *-enter 类之前添加延迟

【问题标题】：React-Transition-Group add a delay before the *-enter class is addedReact-Transition-Group 在添加 *-enter 类之前添加延迟
【发布时间】：2020-02-07 14:51:30
【问题描述】：

我正在尝试使用 react-transition-group 为两个组件的进入/退出设置动画。转换工作正常，但唯一的问题是，当为退出组件触发 *-exit 时，另一个组件也进入 DOM，退出组件在离开前被按下。您可以在下面的代码框中看到它发生的情况。我怎样才能有延迟，以便 *-enter 仅在 *-exit 完成后才被触发？任何帮助表示赞赏。

代码 - https://codesandbox.io/s/csstransition-component-06bpo

【问题讨论】：

标签： reactjs react-transition-group

【解决方案1】：

我用 react-spring 做了类似的东西。我的解决方案是使用绝对定位。这样两个组件就在彼此上，进入和退出动画是在同一时间。我在 Child.js 中添加了一个样式

const style = { position: 'absolute', width: '100%' };

return (
  <div style={style}>
    {props.type.list ? (...

而且我还把进入动画修改为从左到右，我觉得这样更好。

.alert-enter {
  transform: translateX(-100%);
}

示例如下：https://codesandbox.io/s/csstransition-component-xuw2t

【讨论】：

谢谢彼得！正是我需要的！