使用React.js实现淡入过渡效果的关键——ReactCSSTransitionGroup

Question

我有一个简单的登录页面，想要添加过渡效果。我的视图渲染使用React。 我希望按照特定状态让一个按钮淡入和淡出：

<ReactCSSTransitionGroup transitionName="example" transitionAppear={true}>
                              <div className="button-row">
                                  <a href="#" className="button" onClick={this.saveAndContinue}>Request Invite</a>
                              </div>
                              </ReactCSSTransitionGroup>

CSS（层叠样式表）：

.example-enter {
  opacity: 0.01;
  transition: opacity .5s ease-in;
}

.example-enter.example-enter-active {
  opacity: 1;
}

.example-leave {
  opacity: 1;
  transition: opacity .5s ease-in;
}

.example-leave.example-leave-active {
  opacity: 0.01;
}

.example-appear {
  opacity: 0.01;
  transition: opacity .5s ease-in;
}

.example-appear.example-appear-active {
  opacity: 1;
}

然而，当我运行此代码时，过渡效果没有生效。我是否漏掉了什么？谢谢！

- user1072337

Answer 1

你的代码可以运行，可以查看 JSFiddle。我已经延长了 .example-appear 的过渡持续时间，并更改了 .example-enter 的过渡效果，在单击任何链接后都可以看到这些更改。

请注意，.example-appear 在 componentDidMount() 中触发，在挂载的组件的第一次渲染中具有影响；另一方面，.example-enter 则对新渲染的子组件具有影响。

- okm