ReactCSSTransitionGroup - how to override componentWillLeave(callback)?

Question

I'm trying to access the componentWillMount hook in order to fade out a canvas element that is not a child of the transitioning <Home> component. (Animation of <Home> itself works as expected.)

<ReactCSSTransitionGroup transitionName="screenTrans" transitionEnterTimeout={200} transitionLeaveTimeout={3000}>
    <Home key={'home'} />
</ReactCSSTransitionGroup>

Home.js:

export default class Home extends React.Component {
    ...
    componentWillLeave( callback ) {
        console.log( "am i getting called?" ) // no!
        this.fadeOutCanvas();
    }
}

What am I missing? Thanks...

score 2 · Answer 1 · answered May 19 '16 at 12:10

Quite late answer but I'm now facing the same problem.

The thing is that you're using ReactCSSTransitionGroup which does NOT call the callbacks like ReactTransitionGroup (different component). The problem is that you would need a component that does both (sets css AND calls your callback)

From the docs:

When using ReactCSSTransitionGroup, there's no way for your components to be notified when a transition has ended or to perform any more complex logic around animation. If you want more fine-grained control, you can use the lower-level ReactTransitionGroup API which provides the hooks you need to do custom transitions.

Checked around and I couldn't find anything, so I'll write my own component and hopefully open source it!

ReactCSSTransitionGroup - how to override componentWillLeave(callback)?

1 Answers1