React - 重置正在进行的css动画

Question

在React中，如果我有一个基于按钮点击启动的动画，我该如何重新启动该动画？

JSX

const animationStyle = `countdown ${this.props.duration}s linear infinite forwards`;


<svg id="svg1">
  <circle
    id="c1"
    style={{animation: animationStyle }}
    cx="100"
    cy="100"
    r="80"
  ></circle>
</svg>

.css文件

@keyframes countdown {
  from {
    stroke-dashoffset: 0px;
  }
  to {
    stroke-dashoffset: 500px;
  }
}

如果我传递新的持续时间，则不会立即开始新动画。

Answer 1

我相信你需要删除svg圈并在更新持续时间时再次添加它以便能够重置动画。

所以在反应中你可以通过保持一个名为resetAnimation的状态变量来做到这一点，在更新持续时间之前将值更改为true这将迫使组件在setState revert {的回调函数中呈现{1}}再次为false并更新持续时间。

检查以下代码：

resetAnimation

}