CODEWITHSUNDEEP
cssreactjsreactcsstransitiongroup
mrberggg
mrberggg

Reputation: 576

ReactCSSTransitionGroup leave animation not working

I can't get -leave animations to work with ReactCSSTransitionGroup. I have the following code:

<ReactCSSTransitionGroup
  transitionName="fader"
  transitionEnterTimeout={500}
  transitionLeaveTimeout={500}>
  {React.cloneElement(children, {
    key: pathname
  })}
</ReactCSSTransitionGroup>

with the following styles:

.fade-enter {
  opacity: 0.01;
}
.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}
.fade-leave {
  opacity: 1;
}
.fade-leave.fade-leave-active {
  opacity: 0.01;
  transition: opacity 500ms ease-in;
}

If I look at the DOM both the -enter and -leave styles are being applied on route changes but only the -enter styles are animating. If I click rapidly between routes the leave animation does show up, but for previous routes. I.e. if I go A -> B -> A when I get back to A the leave animation will flicker briefly.

Upvotes: 3

Views: 3623

Answers (1)

mrberggg
mrberggg

Reputation: 576

Ok, turns out the animation was being applied but the div was offscreen. Oops. When animating routes if you want the previous page to have a leave animation you have to add a position:absolute or something similar to keep it onscreen.

Upvotes: 4

Related Questions