-
Notifications
You must be signed in to change notification settings - Fork 649
Open
Description
I am using react-transition-group v2.2.0 and react-router v4.1.1 to do the page sliding animation. Once a component is mounted, its exit animation is specified, not changeable, which troubles me.
function getPathDepth(location) {
let pathArr = (location || {}).pathname.split('/');
pathArr = pathArr.filter(n => n !== '');
return pathArr.length;
}
class Routers extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
prevDepth: getPathDepth(props.location)
};
}
componentWillReceiveProps() {
console.log('prev:', getPathDepth(this.props.location));
this.setState({ prevDepth: getPathDepth(this.props.location) });
}
render() {
return (
<Route render={({ location }) =>
<TransitionGroup>
<CSSTransition
key={location.key}
timeout={500}
classNames={ getPathDepth(location) - this.state.prevDepth > 0 ? 'pageSliderLeft' : 'pageSliderRight' }
classNames={classNames}
mountOnEnter={true}
unmountOnExit={true}
>
<Switch location={location}>
<Route path="/" exact component={ Index } />
<Route path="/comments" component={ Comments } />
<Route path="/opinions" component={ Opinions } />
<Route path="/games/lol" component={ LOL } />
<Route path="/games/dota" component={ DotA } />
<Route path="/games" component={ Games } />
</Switch>
</CSSTransition>
</TransitionGroup>
} />
)
}
}
const WrapRouters = withRouter(Routers);
export default function RouterMap() {
return (
<BrowserRouter>
<WrapRouters />
</BrowserRouter>
);
}
The css:
.pageSliderRight-enter {
transform: translate3d(-100%, 0, 0);
}
.pageSliderRight-enter.pageSliderRight-enter-active {
transform: translate3d(0, 0, 0);
transition: all 600ms;
}
.pageSliderRight-exit {
transform: translate3d(0, 0, 0);
}
.pageSliderRight-exit.pageSliderRight-exit-active {
transform: translate3d(-100%, 0, 0);
transition: all 600ms;
}
.pageSliderLeft-enter {
transform: translate3d(100%, 0, 0);
}
.pageSliderLeft-enter.pageSliderLeft-enter-active {
transform: translate3d(0, 0, 0);
transition: all 600ms;
}
.pageSliderLeft-exit {
transform: translate3d(0, 0, 0);
}
.pageSliderLeft-exit.pageSliderLeft-exit-active {
transform: translate3d(100%, 0, 0);
transition: all 600ms;
}
The animation:
If only sliding from '/' to '/games' and then from '/games' back to '/', everything is fine. But with more routes, it gets complicated.
For the Games component:
- type 1: '/' --> '/games' && '/games' --> '/', exit animation should be 'slide to right'
- type 2: '/' --> '/games' && '/games' -->'/games/lol', exit animation should be 'slide to left'
As the Games component mounted, its exit animation classNames is 'pageSliderLeft' or 'pageSliderRight'. No matter which class, there is only one animation. But Games component has two exit types.
How to make the Games component's exiting show different animations?
nicgirault, mvasin, harry91, liukaren, KevinSheedy and 9 more
Activity
Chopinsky commentedon Aug 31, 2017
This is a typical unmounting animation problem, I've run into it before. My solution back then was to call setState to update the
classNames
first, such that the exit animation will be up to date, and then set a timer with 0 delay to update thein
states to trigger the exit animation. Not pretty, but working.jquense commentedon Aug 31, 2017
yeah the issue is that you can't really change the animations on an item from the outside the "normal" way because you unrender it. There is the childFactory prop for addressing this, which is called with the item and the state even for the items you don't "see" anymore
m-allanson commentedon Oct 6, 2017
For anyone else that finds their way here - there's a great Q&A on StackOverflow with a detailed explanation on how to use childFactory: https://stackoverflow.com/questions/41404232/react-transitiongroup-and-react-cloneelement-do-not-send-updated-props
pmcalmeida commentedon Nov 1, 2017
@Chopinsky I'm not sure I follow. Could you paste an example demonstrating how you achieved that?
cjnaude commentedon Dec 5, 2017
childFactory is definitely the way to go. Thanks to the SO link provided by @m-allanson, I was able to use the childFactory as follows to correctly update the animation:
marshall-cho commentedon Feb 27, 2018
@cjnaude Does this really work with React 16 and React Transition Group v2?
TapX commentedon Feb 28, 2018
@marshall-cho Here are my dependencies:
"react": "^16.2.0"
"react-transition-group": "^2.2.1"
Are you getting any specific errors, or is the animation just not updating?
nicgirault commentedon Mar 8, 2018
I just wanted to share an article I just wrote dealing with this issue: https://medium.com/lalilo/dynamic-transitions-with-react-router-and-react-transition-group-69ab795815c9. This thread helped me a lot. Thanks
sag1v commentedon Mar 16, 2018
@nicgirault Greate article.
The part of providing the immutable
location
to theswitch
made me smile 😄I'm going to explore your example's source code, it looks great!
Thank you.
moneydance commentedon Jan 30, 2019
https://codesandbox.io/s/p93vp612w0 Heres a sandbox app with my implementation if anyones struggling with this.
johnbonds commentedon Oct 30, 2020
If anyone else is struggling with this problem, the way we fixed it was to wrap the entire inside a div. Then when we want the components to slide in either direction we dynamically change the class of that parent div which targets (selects) the classes of the child elements inside the transition component. That way the classes inside the transition stay static while the classes of parent div change thereby controlling the direction of the transitions using CSS selectors.
cjke commentedon Nov 20, 2020
@nicgirault Thanks for the article mate, I was really struggling to get this right
findDOMNode is deprecated
error #820chupzzz commentedon May 19, 2022
2022 and the issue is still here!
Solved by example of @moneydance (comment above): thanks a lot, you saved my day!
One-string solver: