CODEWITHSUNDEEP
reactjsreactcsstransitiongroupreact-transition-group
Juan Ma
Juan Ma

Reputation: 69

React Transition Group And Animations

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.

Upvotes: 1

Views: 968

Answers (1)

Shirley
Shirley

Reputation: 190

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

Upvotes: 4

Related Questions