Nested animated.div on leave

[SugarDarius]

Hi !

I've got an issue when my component leave on nested animated.div.

Here's my code :

import TransitionGroup                                      from 'react-transition-group/TransitionGroup';

class RouteTransition extends Component {
    constructor(props) {
        super(props);

        this.state = {
            animate: new Animated.Value(0)
        };
    }

    componentWillEnter(cb) {
        setTimeout(() => {
            Animated.spring(this.state.animate, {
                toValue: 1,
                bounciness: 0,
                velocity: 1.2
            }).start();
        }, 10);

        cb();
    }

    componentWillLeave(cb) {
        Animated.spring(this.state.animate, {
            toValue: 0,
            bounciness: 0,
            velocity: 1.2
        }).start();

        setTimeout(() => { cb(); }, 450);
    }

    render() {
        const { children } = this.props;

        return (
            <Animated.div
                className='transition-motion-component-box'
                style={{
                    opacity: Animated.template`${this.state.animate}`
                }}
            >
                <Animated.div
                    className='transition-motion-component-box__translate-box'
                    style={{
                        transform: Animated.template`
                            translate3d(${this.state.animate.interpolate({
                                inputRange: [0, 1], outputRange: [`${window.innerWidth}px`, '0px']
                            })}, 0, 0)
                        `
                    }}
                >
                    {React.Children.only(children)}
                </Animated.div>
            </Animated.div>
        );
    }
}

<TransitionGroup component={TransitionGroupComponent}>
    <RouteTransition>
        <Route
            exact={exact}
            path={path}
            render={render}
        />
    </RouteTransition>
</TransitionGroup>

When the component RouteTransition enter everything is okay. The first Animated.div performs the animation of the opacity from 0 to 1 and the second Animated.div performs the animation of the translate3d on x from window.innerWidth to 0.

The problem occurs when the component leave. The animation of the opacity is good, I see it well but the animation of translate3d is completely ruined. The second Animated.div don't performs his animation and disappears in a blink. I don't really understand why.

Can you help me ?

Many thanks,
Aurélien