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

Question

我正在尝试使用反应过渡组来动画两个组件的进入/退出。转换工作正常，但唯一的问题是，当为现有组件触发 *-exit 时，另一个组件也进入 DOM，并且在离开之前将退出组件向下推。您可以在下面的代码沙箱中看到它。我怎样才能有延迟，以便仅在 *-退出完成后触发 *-输入？任何帮助，不胜感激。

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

Answer 1

我用反应弹簧做了类似的东西。我的解决方案是使用绝对定位。这样，两个组件彼此相距，并且进入和退出动画在同一时间。我在孩子中添加了一个样式.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

Answer 2

对于未来的Google员工：我找到了一个不需要绝对定位的解决方法。

我将所有可转换元素放在一个样式为display: grid; grid-template-areas: "main";的包装器div 中。然后，每个可过渡的孩子都有一种grid-area: main风格。也就是说，每个孩子在完全相同的网格区域中相互粉碎。然后，当我转换它们时，它们工作得很好——不会相互碰撞或碰撞！