在卸载之前播放动画

Question

我有一个反应应用，我使用<Transition>包中的react-transition-group组件创建和销毁组件时创建过渡动画。我在componentWillMount周期中设置 in prop 。但是，当组件即将被销毁时，我似乎无法弄清楚如何在中恢复。文档并没有真正说明退出过渡

这是我的代码：

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>
        )
    }
}

Answer 1

您能否确认您的组件实际上正在卸载并且componentWillUmount()正在被调用？ v2文档似乎表明组件即使在达到exited过渡状态后仍保留在DOM中。它们暴露了unmountOnExit prop，它应该在组件到达退出状态后强制卸载组件。根据文档：

  

默认情况下，子组件在达到“退出”状态后仍保持挂载状态。如果您希望在完成退出后卸载组件，请设置unmountOnExit。