Leaving component animation with the React Transition Group

Being new to React I have this question - I have two React components, a parent component:

class Container extends Component {

  render(){
    if(!this.props.someProps){
      return (
        <div className="container-text">
          <Intro />
        </div>
      )
    } else {
      return(
        <div className="container-text">
          Some text
        </div>
      )
    }
  }
}

      

        
        
        
      

    

The parent creates the child component based on some prop. Child component:

export default class Intro extends Component{

  constructor(props){
    super(props)

    this.state={
      animated: false
    }
  }

  componentDidMount(){
    this.setState({
      animated:true
    })
  }


  render(){
    return(
      <CSSTransition
        in={this.state.animated}
        timeout={1000}
      classNames='fade'>
        <div>
          <div className='intro-text'>
            <p>choose</p>
            <p>the</p>
            <p>situation</p>
          </div>
        </div>
      </CSSTransition>
    )
  }
}

      

        
        
        
      

    

I am getting a fade out animation when the component is initially mounted, but I don't understand how I can animate it when it leaves the DOM (so basically when this.props.someProps is true and only normal text is displayed in the container class)?