React - 仅在其他已挂载

Question

问题：

动画输入/输出的组件会在转换之间留下空白区域。

期望的输出

1. 初始视图有一个img FOO。
2. onEvent，挂载视频BAR。 beging fading out img
BAR完成安装后
3. ，FOO应该已经完成​​淡出

当前战略

1. 使用reactcsstransition group
2. 组件逻辑类似于此帖jsfiddle
中的accepted answer

这里裸露的骨架

foobar类扩展了Component {

constructor(props){
    super(props)
    this.state = {
        mounted: false
    }
}

handleMounted() {
    this.setState({
        mounted: !this.state.mounted
    })
}

renderFOO() {
    ! this.state.MOUNTED ?
        <FOO /> : null
}

renderBAR() {
    this.state.MOUNTED ?
        <BAR /> : null
}


 render() {
    <ReactCSSTransitionGroup>
        { this.renderFOO() }
        { this.renderBAR() }
    </ReactCSSTransitionGroup>

 }

}

伪码

1. 最初渲染FOO（完成）
2. onClickEvent，setState for＆＃34; mount＆＃34;为BAR
3. 安装时，FOO开始淡出（慢慢地）
4. 安装时，BAR开始淡入（更快）
5. 当BAR视频完成时，反向处理以便FOO在BAR淡出时安装

谢谢大家！如果您需要澄清，请告诉我:)）