使用 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 的过渡，您可以在单击任何链接后看到它。

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

使用 React.js 让 ReactCSSTransitionGroup 为过渡淡入淡出工作

Getting ReactCSSTransitionGroup to work for a fade in transition with React.js

reactjs

reactcsstransitiongroup