动画 CSSTransition 反应答案

【问题标题】：Animation CSSTransition React动画 CSSTransition 反应
【发布时间】：2019-01-14 14:11:21
【问题描述】：

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

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

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

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

我忽略了什么？

【问题讨论】：

【解决方案1】：

你不需要 CssTransition 来实现这个效果。只需 CSS 并在元素上使用 key 属性即可完成。

关键的代码片段是你的元素：

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

我添加了 key 和 className 道具。这告诉 react 在 key 改变时替换它。

接下来是相关的 CSS：

.fadeIn {
  animation: 1s fadeIn;
}

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

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

注意： react-transition-group 仅用于实现退出过渡效果。没有它也可以轻松处理入口过渡效果。

【讨论】：