CODEWITHSUNDEEP
reactjsjsx
Tjoeaon
Tjoeaon

Reputation: 1523

React TransitionGroup componentWillLeave does nothing

I want to animate my loading screen using React TransitionGroup, so far I replaced the componentDidMount() lifecycle with componentWillAppear(), which works perfectly fine.

So now I'm guessing whenever my component is about to be unmounted, componentWillLeave() gets called before right? This is not the case..

There are some questions on StackOverflow about componentWillLeave and the TransitionGroup lifecycle but nothing seems to answer my question, and some are related to bugs which should have been patched in 0.14 I believe. I already tried a lot of things and logged a lot to the console but nothing happens.

Here is a part of my LoadingScreen component:

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';
import BaseComponent from './BaseComponent.js';

let TweenMax = require('gsap');

export default class LoadingScreen extends React.Component {
    constructor(props){
        super(props);
    }
    componentWillAppear(callback) {
        this._animateIn(callback);
    }
    componentWillLeave(callback) {
        this._animateOut(callback);
    }
    _animateIn(callback) {
        let node = ReactDOM.findDOMNode(this);
        TweenMax.to(node, 0.7, {ease: Power2.easeInOut, opacity: 1, y: -75}).eventCallback('onComplete', callback);     
    }
    _animateOut(callback) {
        console.log('here');
        let node = ReactDOM.findDOMNode(this);
        TweenMax.to(node, 0.5, {opacity: 0, x: -75}).eventCallback('onComplete', callback);
    }

    render() {  
     // Render stuff...
    }

And for your info, the render function of the parent component (it makes use of a FirstChild component so that I can use an expression):

render () {
    return  <TransitionGroup component={FirstChild}>
            {this.state.isLoading ? <LoadingScreen error={this.state.hasError}/> : <VRScene images={this.state.images}/>}
            </TransitionGroup>
    }

I'm guessing it has something to do with the callbacks because the docs state:

It will block other animations from occurring until callback is called. It is only called on the initial render of a TransitionGroup.

Do I call these recursively? Am I doing something wrong here? Or is this another bug?

Some insight would be great :)

TIA!

Upvotes: 0

Views: 902

Answers (1)

QoP
QoP

Reputation: 28397

You have to provide an unique key for all children inside TransitionGroup. Otherwise React will not be able to determine which children have entered or left.

{this.state.isLoading ? 
             <LoadingScreen key="loader" error={this.state.hasError}/> :
             <VRScene key="VRScene" images={this.state.images}/>
}

example with keys -> Works

example without keys -> Does not work

Upvotes: 1

Related Questions