Animation Switch not compatible with react-transition-group v2

This is regarding - https://github.com/ReactTraining/react-router/issues/4351

So react-transition-group is superceeding react-addons-css-tranistion-group - https://github.com/reactjs/react-transition-group

Transition API v2 expects immediate children of <TransitionGroup> to be <CSSTransition>.

React Router <Switch> expects immediate children to be of type <Route>.

Does this mean it is not possible to do this with v2 transition api? I put some details/code here - https://github.com/reactjs/react-transition-group/issues/83

[horizon-blue]

@DGizmo Seems like the problem is that ReactDOM.findDOMNode(this) returns null when your component switch to exit state.

As in facebook/react#4651, ReactDOM.findDOMNode will return null when the component is unmounted or the ref changes. Are you unmounting or re-referencing the DOM node inside your route?

I don’t know enough about your setup to give a suggestion, but in my personal experience, I always found it very helpful to wrap everything inside CSSTransition with a div. This will not only ensure that CSSTransition always have a DOM node to work on (so findDOMNode won’t return null), but also allow me to separate route transition and all the other animation within the route (otherwise, the animation will be applied to the outermost DOM node inside your route, which might not be what you want)

So here is how you can wrap your routes, notice the div with class WRAPPER:

 <TransitionGroup>
    <CSSTransition key={this.props.location.pathname.split('/')[1]} timeout={500} classNames="fadeTranslate" mountOnEnter={true} unmountOnExit={true}>
        <div className="WRAPPER">
            <Switch location={this.props.location}>
                <Route path="/" exact component={Home} />
                <Route path="/blog" component={Blog} />
                <Route path="/albumn" component={Albumn} />
            </Switch>
        </div>
    </CSSTransition>
</TransitionGroup>

And the classNames you give CSSTransition will be applied to this div:

Give it a try 😃. Let me know if the issue still persists.

[horizon-blue]

Not sure whether this is what you want, but here is how I use react-transition-group v2 with react-router v4:

<TransitionGroup>
    <CSSTransition key={this.props.location.key} timeout={500} classNames="fading-animation-transition" mountOnEnter={true} unmountOnExit={true}>
        <Switch location={this.props.location}>
            <Route path="/" exact component={Home} />
            <Route path="/blog" component={Blog} />
            <Route path="/albumn" component={Albumn} />
        </Switch>
    </CSSTransition>
</TransitionGroup>