javascript - 反应 - 仅在其他已安装后淡入组件

Question

问题：

动画输入/输出的组件在过渡之间留下空白。

期望的输出

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

当前战略

1. 使用 reactcsstransition 组
2. 组件逻辑类似于从这篇文章接受的答案中获取的这个jsfiddle

这里的骨架

foob​​ar 类扩展组件 {

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 "mounting" for BAR
3. 安装时，FOO 开始淡出（缓慢）
4. 安装时，BAR 开始淡入（更快）
5. 当 BAR 视频完成时，反向处理，以便 FOO 挂载，而 BAR 淡出

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