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

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

I am trying to use react-transition-group to animate the entry/exit of two components. The Transitions are working fine, but the only issue is that when *-exit is fired for the exiting component, the other component also enters the DOM and the exiting component is pushed down before leaving. You can see it happening in the codesandbox below. How can I have a delay so that the *-enter is fired only after *-exit completes? Any help is appreciated.

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

Solution

I made something similar with react-spring. My solution was to use absolute positioning. This way the two components are on each other and the entering and exiting animation is in the same time. I added a style in the Child.js

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

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

And I also modified the enter animation to be left to right, it seems better I think.

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

Here is the example: https://codesandbox.io/s/csstransition-component-xuw2t