Question

问题是我有三种状态：默认，错误和成功。根据状态，将特定组件呈现到dom中。当这个组件进入或离开时，我需要添加一个淡出动画。

我已尝试过自定义CSS，GSAP（但不想在我的项目中安装更多软件包），现在尝试使用react-transition-group。

为了保持简单，我已经创建了＆＃34;错误＆＃34;组成如下：

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>
    )
  }
}

在索引页面上我有：

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

对于某些共鸣，当this.state.formError为true时，组件呈现并且淡入完成，但当状态变为false时，淡出不起作用。< / p>

Answer 1

不幸的是，纯粹的React CSS Transition组在卸载组件时无法触发动画。有关详细信息，请参阅this github issue。 This repo with a comparison of animation methods in react可能会有所帮助，他们建议将React CSS Transition组与GSAP或Anime.js一起使用

反应过渡组和动画

1 个答案: