Open jasonintju opened 7 years ago
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 the in
states to trigger the exit animation. Not pretty, but working.
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
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
@Chopinsky I'm not sure I follow. Could you paste an example demonstrating how you achieved that?
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:
//This returns a childFactory to provide to TransitionGroup
const childFactoryCreator = (classNames) => (
(child) => (
React.cloneElement(child, {
classNames
})
)
);
<TransitionGroup
childFactory={childFactoryCreator(condition ? "anim1" : "anim2)}
>
<CSSTransition
key={key}
classNames={condition ? "anim1" : "anim2"}
>
//Item that gets transitioned goes here
</CSSTransition>
</TransitionGroup>
@cjnaude Does this really work with React 16 and React Transition Group v2?
@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?
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
@nicgirault Greate article.
The part of providing the immutable location
to the switch
made me smile :smile:
I'm going to explore your example's source code, it looks great!
Thank you.
https://codesandbox.io/s/p93vp612w0 Heres a sandbox app with my implementation if anyones struggling with this.
If anyone else is struggling with this problem, the way we fixed it was to wrap the entire
@nicgirault Thanks for the article mate, I was really struggling to get this right
2022 and the issue is still here!
Solved by example of @moneydance (comment above): thanks a lot, you saved my day!
One-string solver:
const dynamicChildFactory = classNames => child => React.cloneElement(child, { classNames });
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.
The css:
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:
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?