React-transition-group: Animations not smooth and equal timeout causes flicker

[webchaz]

This is the animation I'm using, taken from animate.css.

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
}

.fadeLeft-enter {
  animation-name: fadeInLeft;
  animation-duration: 400ms;
}

.fadeLeft-enter.fadeLeft-enter-active {
  animation-name: fadeInLeft;
  animation-duration: 400ms;
}

.fadeLeft-exit {
  animation-name: fadeOutLeft;
  animation-duration: 400ms;
}

.fadeLeft-exit.fadeLeft-exit-active {
  animation-name: fadeOutLeft;
  animation-duration: 400ms;
}

I'm then using the react transition group with react-router:

<TransitionGroup>
    <CSSTransition
        key={this.props.location.key}
        classNames='fadeLeft'
        timeout={300}
        mountOnEnter={true}
        unmountOnExit={true}
    >
    <div>
      <Switch location={this.props.location}>
        <Route path='/one' exact component={Primary} />
        <Route path='/one/two' exact component={Secondary} />
      </Switch>
    </div>
  </CSSTransition>
</TransitionGroup>

I set the timeout here to 300, if I set it to 400 to match the animation duration, I get flickering where the animation seems to complete but the component is left behind and flashes quickly. I'm not sure exactly what the right "formula" is to avoid this or if my animations are incorrect for the different transition states.

So my question is how should the timeout be set with this kind of animation to avoid flickering and smooth transition?

[adamgruber]

I just ran into a similar situation. You could try specifically adding in the start and end transforms to your keyframes

@keyframes fadeOutLeft {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
}

and then also add the end to your .fadeLeft-exit class

.fadeLeft-exit {
  transform: translate3d(-100%, 0, 0);
  animation-name: fadeOutLeft;
  animation-duration: 400ms;
}

[carllx]

Same problem on me Demo on jsfiddle
no Animations during [ENTER] -- [ENTERING] --- [ENTERED]

[artola]

@adamgruber I have spent several hours on this issue ... your "fix" on top of @webchaz css is the "magical" solution. God bless you !!!

[silvenon]

Transitions and animations styles should be applied only on -active classes. For example, .fadeLeft-enter should define starting styles (not necessary in your case because you're using animations, not transitions), and fadeLeft-enter-active should start the animation. If you fix that you'll solve the flickering. Also, make sure that those elements don't affect the flow of the layout (e. g. position absolute or fixed).

See our CSSTransition demo if you need an example of how this should look with transitions.

[silvenon]

Actually, scratch that layout flow part, I can't assume the situation. Another solution could be to apply only to -active classes, like I said, and also add animation-fill-mode: forwards to the -exit-active class. That will make sure that the styles don't return to the start of the animation (the flicker), and remain at what they were when the animation ended. This is a variation of @adamgruber's solution.

[m4staka]

I had a similar problem: a component should fade out but got visible again for a short moment. The cause has been that the animation (fading out) finished and the initial styles got reapplied before the component got unmounted. Thus the flashing. In my case adding animation-fill-mode: forwards solved the problem.

[semanticbodger]

See our CSSTransition demo if you need an example of how this should look with transitions.

This saved my day - thank you! I was using the fade-style examples from the React Router Codepen that purports to show you how to fade components in/out. But their example classes lead to the flickering problem.