React-transition-group: Animation with position: relative

[lukasreusch]

I am developing a React-widget (step-by-step-wizard), which fetches and shows content from an API. I don't know, how long the texts, I am fetching from the API, are. So I don't know, the height of the widget. The widget should increase the height regarding to the content (like the default HTML-elements). There should be no scrolling.

I can not set a fixed height here. So I can not set position: absolute to the slides I want to animate.

At the moment the animation looks like the following:

The second slide appears below the first slide until the first slide disappears and the second one moves up. Of course, this is completely ugly.

If I set a fixed height and position absolute to the slides everything works fine and smooth.

You can see a demo of my problem here: https://codepen.io/anon/pen/jdQPRw

[silvenon]

If I understood correctly, you basically want slides to exit _instantly_, right now their exit duration is 300, as specified with the timeout prop. Luckily, the timeout prop already supports specifying exit duration! timeout={300} is actually short for timeout={{ enter: 300, exit: 300 }}, so if you simply set timeout={{ enter: 300, exit: 0 }}, you'll get the desired effect. Here's a forked demo. 😉

Let me know if that worked for you.

[lukasreusch]

Hi @silvenon !

Thank you very much! This already helps a lot and the animation looks smoother.
Unfortunately, now I see such a very very short flickering.

Is there any chance to eliminate this with any CSS in the fade-classes?

[silvenon]

It all depends on what you want exactly. The smoothest transition would probably be a cross-fade, but let's try to reduce flickering. Maybe you could animating only the opacity of the _text_ instead of the whole container? E.g. wrap the text with <p> and instead of your current .fade CSS rules you set something like this:

.fade-enter p {
  opacity: 0;
}

.fade-enter.fade-enter-active p {
  opacity: 1;
  transition: opacity 250ms ease-in;
}

Otherwise, if you want to cross-fade, you can revert the timeout prop back to 300 (timeout={300}) and style the exit transitions too:

.fade-exit.fade-exit-active {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: opacity 250ms ease-in;
}

This way it will fade out and also be absolutely positioned so it doesn't take up space. But for this to work properly it's important that you set the immediate parent <div>'s positioning to relative. The <div> I'm referring to is the immediate child of the one with className="widget". Here's a demo for cross-fade.

I hope that helps in understanding how react-transition-group works. It's now up to you to tweak styles the way you want.

[lukasreusch]

@silvenon Thank you Matija!
The cross-fade works perfectly! 🥇