ReactCSSTransitionGroup leave animation not working

Question

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.

Of you are using this with routes, then React may get confused with keys. See [this post](https://medium.com/front-end-hacking/react-page-transition-animations-9d18c90a9831#.bl1qmuamy) for an explanation how to apply cloneElement, children and keys properly in routes. — wintvelt, Mar 21 '16 at 19:58
@wintvelt thanks, I had the keys set up properly, was just confused by the old div being moved offscreen by the new div. — mrberggg, Mar 21 '16 at 20:24
@mrberggg I have to implement the same. Have to add page transition on route change. Where you have written that < ReactCSSTransitionGroup> code? — Vaibhav Kumar, Jan 09 '18 at 14:51

score 4 · Accepted Answer · answered Mar 21 '16 at 20:22

4

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.

answered Mar 21 '16 at 20:22

mrberggg

576
1
7
13

1

Could you add more information regarding this issue and how it got solved? – David Pelayo Apr 12 '16 at 12:47
2

@DavidPelayo Sure. When the new component enters, it is placed before the old element and so in the case of a page the old page is pushed down, where it will only be seen if the new page is shorter than the window height. If you want to animate the old page leaving you have to first of all make it visible, e.g. by using `position: absolute;`. You can then go about animating it like normal. Hope that helps. – mrberggg Apr 13 '16 at 20:59

ReactCSSTransitionGroup leave animation not working

1 Answers1