React - fade in component only after other has mounted

Question

problem:

components animating in/out leave white space in between transitions.

desired output

1. initial view has an img FOO.
2. onEvent, mount video BAR. beging fading out img
3. after BAR has completed mounting, FOO should have finished fade out

current strategy

1. using reactcsstransition group
2. component logic resembles this jsfiddle taken from this post's accepted answer

bare skeleton here

foobar class extends 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>

 }

}

psuedocode

1. initially render FOO (done)
2. onClickEvent, setState for "mounting" for BAR
3. when mounting, FOO begins fading out (slowly)
4. when mounting, BAR begins to fade in (quicker)
5. when BAR video completes, reverse process so FOO mounts while BAR fades out

Thanks everyone! let me know if you need any clarification :)