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

Question

我正在尝试使用react-transition-group来动画两个组件的进入/退出。转换工作正常，但唯一的问题是，当为退出组件触发 *-exit 时，另一个组件也会进入 DOM，并且退出组件在离开之前被下推。您可以在下面的代码和框中看到它的发生。如何延迟以便仅在 *-exit 完成后才触发 *-enter ？如有任何帮助，我们将不胜感激。

代码 - 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