reactjs - 使用 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;
}

但是，当我运行它时，过渡不起作用。有什么我想念的吗？谢谢！

Answer 1

您的代码确实有效，请参阅JSFiddle。我已经扩大了过渡持续时间.example-appear并更改了.example-enter单击任何链接后您可以看到的过渡。

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