1

问题是我有一个包含三种状态的表单：默认、错误和成功。根据状态，将特定组件渲染到 dom 中。当此组件进入或离开时，我需要添加淡入淡出动画。

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

为了保持简单，我创建了“错误”组件，如下所示：

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.formErroris时true，组件呈现并且淡入完成，但是当状态变为 时false，淡出不起作用。

4

1 回答 1

4

不幸的是，当组件卸载时，纯 React CSS 转换组无法触发动画。有关更多详细信息，请参阅此 github 问题。这个 repo 与 react 中的动画方法比较可能会有所帮助，他们建议将 React CSS Transition 组与 GSAP 或 Anime.js 结合使用

于 2018-01-23T14:54:39.957 回答