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

Question

我正在尝试使用 react-transition-group 为两个组件的 entry/exit 设置动画。转换工作正常，但唯一的问题是当 *-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 ? (...

而且我还修改了enter动画是从左到右的，我觉得这样更好

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

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

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

React-Transition-Group add a delay before the *-enter class is added

reactjs

react-transition-group