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

Question

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

score 3 · Accepted Answer · answered Oct 10 '19 at 09:39

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

Thank you Peter! Exactly what I needed! – Vijay Venugopal Menon Oct 10 '19 at 09:44 — Vijay Venugopal Menon, Oct 10 '19 at 09:44

score 0 · Answer 2 · answered Jul 01 '23 at 07:07

For future Googlers: I found a workaround that doesn't require absolute positioning.

I put all the transition-able elements inside of a single wrapper div that has a style of display: grid; grid-template-areas: "main";. Then, each transition-able child has a style of grid-area: main. That is, each child is smashed on top of each other in the exact same grid area. Then, when I transition them, they work just fine — no bumping each other up or down!

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

2 Answers2