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会对新渲染的子组件产生影响。

使用React.js使ReactCSSTransitionGroup适用于淡入淡出过渡

1 个答案: