Play animation before Unmount

Question

I have a react app and I'm using the <Transition> component from the react-transition-group package to create transition animations when the component is created and destroyed. I set the in prop in the componentWillMount cycle. However, I can't seem to figure out how to revert the in prop back when the Component is about to be destroyed. The docs didn't really say much about the exit transition

Here is my code:

const defaultStyle = {
    transition: `opacity 1000ms ease-in-out`,
    opacity: 0,
    padding: 20,
    display: 'inline-block',
    backgroundColor: '#8787d8'
};

const transitionStyles = {
    entering: { opacity: 0 },
    entered: { opacity: 1 },
    exiting: { opacity: 1 },
    exited: { opacity: 0 },
};

export default class Home extends Component {

    constructor() {
        super();
        this.state = {
            in: false
        }
    }

    componentWillMount() {
        const home = this;

        // This: Works Perfectly
        home.setState({ in: true });
    }

    componentWillUnmount() {
        const home = this;

        // This: Not so much
        home.setState({ in: false });
    }

    render() {
        return (
            <Transition in={ this.state.in } timeout={ 0 }>
                {(state) => (
                    <div className="page" style={{
                        ...defaultStyle,
                        ...transitionStyles[state]
                    }}>
                        I'm A fade Transition!
                    </div>
                )}
            </Transition>
        )
    }
}

https://reactjs.org/docs/animation.html#componentwillleave – Agney Dec 17 '17 at 13:45 — Agney, Dec 17 '17 at 13:45
Doesn't work. I'm using react-transition-group v2 – Ace Falobi Dec 17 '17 at 14:16 — Ace Falobi, Dec 17 '17 at 14:16

score 0 · Answer 1 · answered Dec 17 '17 at 16:58

0

Can you confirm that your component is ever actually unmounting and that componentWillUmount() is getting invoked? The v2 docs seem to suggest that components stay in the DOM even after reaching the exited transition state. They expose an unmountOnExit prop that should force the component to unmount after it reaches the exited state. Per the docs:

By default the child component stays mounted after it reaches the 'exited' state. Set unmountOnExit if you'd prefer to unmount the component after it finishes exiting.

answered Dec 17 '17 at 16:58

Parker Ziegler

980
6
13

I don't want to unmount onExit, I want to exit onUnmount. I'm using a router to switch components. I want to activate the exit state just before the component is unmounted and then continue unmounting after the animation is completed. – Ace Falobi Dec 18 '17 at 13:30

Play animation before Unmount

1 Answers1