CODEWITHSUNDEEP
javascriptreactjscss-animationstransition
Ndee
Ndee

Reputation: 71

Leaving component animation with React Transition Group

Being new to React I have this question - I have two react components , the parent component is:

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 renders child component based on some prop. The child Component is: 

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 do get the fade animation when the component initially mounts, but i don't understand how i can animate it when it leaves the DOM ( so basically when this.props.someProps is true and just plain text is rendered in the Container class) ?

Upvotes: 3

Views: 696

Answers (1)

agm1984
agm1984

Reputation: 17132

I wrote an article about this the other day. https://medium.com/@agm1984/how-to-manage-page-transition-animations-in-react-ba09c66655c6

The short answer is you can use react-transition-group library to add hooks into react-router which gives you control over the page exit event, which means you can do whatever you want with the component before it unmounts.

You can do it with CSS or include a more beast-mode horsepower library such as GSAP.

If you are an ultra turbo user, you can review the CodeSandbox repo for my article and see if it's what you might be looking for: https://zw8n483zym.codesandbox.io/

Upvotes: 1

Related Questions