动画C传输反应

你不需要CST来达到这个效果。只需使用CSS和 key 元素的属性。

See this working demo

代码的关键部分是您的元素:

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

我加上了 钥匙 和 className 道具。这将告诉react在密钥更改时替换它。

接下来是关联的CSS:

.fadeIn {
  animation: 1s fadeIn;
}

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

这将在每次重新渲染元素时应用动画中的淡入。

注: 这个 react-transition-group 只需要实现退出转换效应。没有它,入口转换效果很容易处理。