动画CSSTransition React

Question

使用CSSTransition组件和React我想应用淡入动画

在这里您可以找到一个小例子，我想要实现：https://codesandbox.io/s/j75712qjvy

在第一次加载时，文本会淡入，但单击下面的某些按钮时，不会再次显示。

每次单击一个按钮，状态都会更新，并且组件会重新呈现。 所以我的期望是fadeIn动画应该重新启动。

我忽略了什么？

Answer 1

您不需要CssTransition即可达到此效果。只需使用CSS并在元素上使用key属性即可实现。

See this working demo

关键代码段是您的要素：

<h2 className="fadeIn" key={this.state.value}>
  {this.state.value}
</h2>

我添加了key和className道具。这告诉您在密钥更改时要更换它。

接下来是关联的CSS：

.fadeIn {
  animation: 1s fadeIn;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

每次重新渲染元素时，都会在动画中应用淡入淡出。

注意：仅需要react-transition-group才能实现退出过渡效果。没有它，可以轻松处理入门转换效果。