mrberggg mrberggg - 1 month ago 29
React JSX Question

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.

Answer

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.