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

Question

我正在尝试使用react-transition-group来为两个组件的进入/退出设置动画。转换工作得很好，但唯一的问题是，当为正在退出的组件触发*-exit时，另一个组件也会进入DOM，并且正在退出的组件在离开之前会被下推。你可以在下面的代码框中看到它的发生。我怎么能有一个延迟，使得*-enter只在*-exit完成之后才被触发呢？任何帮助都是非常感谢的。

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

Answer 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