React Transition Group And Animations

Question

The problem is I have a form whit three states: default, error and success. Depending on the state, a specific component is rendered into the dom. I need to add a fade in out animation when this component enters or leave.

I've tried whith custom CSS, GSAP ( but don't want to install more packages to my project ) and now trying with react-transition-group.

To keep is simple I've created the "error" component as follow:

export default class NewsletterFormError extends React.Component {
   componentWillMount() {
   }
   componentDidMount() {
   }
   render() {
      return (
        <div className="NewsletterFormError">
          I'm an error message
        <style jsx>{`
          .NewsletterFormError {
            font-size: 50px;
          }  
        `}</style>
        </div>
    )
  }
}

And on the index page I have:

    { this.state.formError &&
        <CSSTransitionGroup
        transitionName="test"
        transitionAppear={true}
        transitionAppearTimeout={200}            
        transitionEnter={true}
        transitionEnterTimeout={2000}
        transitionLeave={true}
        transitionLeaveTimeout={2000}>
          <NewsletterFormError />
        </CSSTransitionGroup>
      }

For some reson, when this.state.formError is true, the component renders and the fade in is done, but when the state chages to false, the fade out is not working.

Shirley Shirley · Accepted Answer · 2018-01-23T14:54:39

Unfortunately, pure React CSS Transition groups can't trigger an animation when a component is unmounted. See this github issue for more details. This repo with a comparison of animation methods in react may be helpful, they recommend using React CSS Transition groups in conjunction with GSAP or Anime.js

React Transition Group And Animations

1 Answers