When set to "out-in", on "leave" the upcoming component appears before the leaving component #22
Description
While transitioning routes, it seems that whenever I trigger my animation during componentWillLeave, the animation does not occur. While investigating this, it seems that the upcoming component is already in place of the component that is leaving.
As a side note, I have transitionMode set to out-in.
Here is what the routes looks like:
<TransitionSwitch location={location}>
<AnimatedWrapper key={location.pathname}>
{routes.map(({ path, component: Component, ...rest }) =>
<TransitionRoute
key={path}
{...rest}
path={`${match.url}/${path}`}
render={props => <Component {...props} />}
/>,
)}
</AnimatedWrapper>
</TransitionSwitch>
I am utilizing the TransitionSwitch and TransitionRoute you posted a while back in conjunction with React Router v4.
This is what AnimatedWrapper looks like that wraps the routes:
import React from 'react';
import styled from 'styled-components';
export default class AnimatedWrapper extends React.Component {
state = {
duration: 400,
status: null,
};
componentDidMount() {
this.setState({
status: 'mounted',
});
}
componentWillAppear(cb) {
this.setState({
status: 'appear',
});
cb();
}
componentWillEnter(cb) {
this.setState({
status: 'enter',
});
setTimeout(() => {
cb();
}, this.state.duration);
}
componentWillLeave(cb) {
this.setState({
status: 'leave',
});
setTimeout(() => {
cb();
}, this.state.duration);
}
render() {
const { children } = this.props;
return (
<Container status={this.state.status} duration={this.state.duration}>
{children}
</Container>
);
}
}
const Container = styled.div`
height: 100%;
.PageBody {
opacity: 0.01;
transform: translateY(16px);
transition: opacity ${props => props.duration}ms cubic-bezier(0.455, 0.030, 0.515, 0.955),
transform ${props => props.duration}ms cubic-bezier(0.455, 0.030, 0.515, 0.955);
${props => () => {
if (props.status === 'enter' || props.status === 'appear') {
return `
opacity: 1;
transform: translateY(0px);
`;
}
}};
}
`;
The enter transition works perfectly, but the leave transition does not. I even did a little test where I created a function called hide that did the same state change as componentWillLeave, and the animation was seamless. However, when componentWillLeave calls the same state change, it does nothing and the upcoming route comes into place instead. Any thoughts?
Thank you!