0

I have a component that is using React Transition Group to animate a component as it changes from one component to the next.

The problem I am having is that the next component is loading before the current animation is finished, so it looks a bit odd.

I think i could solve this if it were possible to delay the render() method when the component updates, as it never really unmounts, and this is why the component flashes the next image.

there is FAR too much code involved to paste it all here so i made my github public, and created an issue there to show what I am experiencing.

also you can view the site as it is live for this debugging session. stevensheaves.me

Also, no judgy, its not 100% finished.

Steven Sheaves
  • 13
  • 4

1 Answers1

0

You can simply use the callback of the Transition Group namely onEntered.

A callback fired immediately after the 'enter' or 'appear' classes are removed and the done class is added to the DOM node.

You can use a flag variable to display your content. Set it to true when the callback is fired and to false when it's onEntering

Murat Karagöz
  • 35,401
  • 16
  • 78
  • 107
  • But in order to use a flag variable like you say, I would have to set it to false when my action fires, which would cause the content currently being animated to disappear, wouldn't it? – Steven Sheaves Jul 31 '20 at 07:34
  • @StevenSheaves Only the children of the transition group – Murat Karagöz Jul 31 '20 at 07:40
  • Karagoz maybe that Is what I am missing. I do not have my components as a child of a transition group, only of CSSTransition I will see if that makes a difference. – Steven Sheaves Jul 31 '20 at 07:49
  • So when I use transition group, I am gettting some very odd behavior, not sure how to describe it, as you would really have to be here to see it – Steven Sheaves Jul 31 '20 at 07:57
  • well, I have a bandaid at least... I just made it to where the face of the card that is being faded out has it's opacity set to 0 immediatly with no transition, so that you only see the border fade out. Not a permanent fix by any means, but it doesnt look bad anymore, so I can focus on the meat of the project till i can come back to it and find a better solution. – Steven Sheaves Jul 31 '20 at 08:17