在卸载之前播放动画

Question

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

这是我的代码：

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

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

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