ReactJs，每次道具更改时停止动画

Question

• 我有一个时钟，其运行时间为用户设置的时间长度。
• 时钟倒计时至零。
• 我有一个css动画，随着时钟倒计时，它会填充<div>。说明过去/剩余的时间

问题在于，每当时钟更新时，动画都会重新启动。因此，动画不会超过用户设置的持续时间。 我不知道将代码放在哪里？

  runTimer = (timerType) => {
    const node = this.myRef.current; // references a div in the html
    let animation;
    const keyFrames = [{ height: '0' }, { height: '100%' }];
    const timing = {
      easing: 'cubic-bezier(.2,.6,.8,.4)',
      duration: 25 * 1000,
      delay: 1000
    }

    if (timerType === "session") {
      timing.duration = this.props.state.userSetSession; // for example 1200 (20 mins)
      animation = node.animate(keyFrames, timing);
      this.props.run(sType) // calls redux function to reduce session by 1
      ...