Javascript 当使用不同道具渲染组件的多个实例时，关键帧动画不工作？用于动画的宽度取决于道具值

因此问题陈述如下所示：-我有一个进度条组件，它将skillValue作为道具，然后基于此道具，我尝试添加动画，以便在初始加载时进度条从0动画到skillValue。 为了更好地理解这个问题，我将首先向您介绍两个案例

案例1:无动画。这是示例CSS代码。我使用after伪元素在条上显示高亮显示的部分，其宽度取决于prop值。在这个场景中，假设我使用技能值[90,85,70,75]迭代一个数组，并使用这些值显示progressBar组件。 在这个场景中，我可以看到4个ProgressBar，它们的值在数组中定义为不同，样式也是动态的

  width: 100%;
  height: 10px;
  position: relative;
  background: #fff;
  border-radius: 5px;

  ::after {
    content: "";
    display: inline-block;
    position: absolute;
    height: 10px;
    background: ${props => props.color};
    width: ${props => props.skillValue}%;
    border-radius: 5px;
  }

案例2：使用动画现在，当我尝试基于道具值实施动画时，采用类似的道具值，例如：[90,85,70,75]我得到的是progressBar组件动画的所有实例，但仅达到数组上最后一个元素的值75。这是带有动画的代码。我无法弄清楚它是如何导致实例的混合的。或者这是样式化组件的问题

  width: 100%;
  height: 10px;
  position: relative;
  background: #fff;
  border-radius: 5px;

  ::after {
    content: "";
    display: inline-block;
    position: absolute;
    height: 10px;
    background: ${props => props.color};
    border-radius: 5px;
    animation: skillAnim 2s forwards; 
  }

  @keyframes skillAnim {
      0% {
        width: 0;
      }
      100% {
        width: ${props => props.skillValue}%;
      }
  }

---

案例1工作得很好，但问题只出现在案例2中，当我尝试根据动态道具值设置动画时。

不知道这是否是理想的方法。现在我就是这样做的

这是我的组件逻辑

const ProgressBar = ({ className, color, value, skill }) => {
  const [skillValue, setSkillValue] = useState(0);
  useEffect(() => {
    let timer;
    if (skillValue + 3 <= value) {
      timer = setTimeout(() => {
        setSkillValue(skillValue + 3);
      }, 30);
    } else {
      setSkillValue(value);
    }
    return () => clearTimeout(timer);
  }, [skillValue, value]);
  return (
    <StyledProgressBar className={className} color={color} value={skillValue}>
      <span className="skill">{skill}</span>
      <span className="skill-value">{skillValue}%</span>
    </StyledProgressBar>
  );
};

---

这使skillValue能够统一更新到所需的值，并为进度条创建动画效果。

不知道这是否是理想的方法。现在我就是这样做的

这是我的组件逻辑

const ProgressBar = ({ className, color, value, skill }) => {
  const [skillValue, setSkillValue] = useState(0);
  useEffect(() => {
    let timer;
    if (skillValue + 3 <= value) {
      timer = setTimeout(() => {
        setSkillValue(skillValue + 3);
      }, 30);
    } else {
      setSkillValue(value);
    }
    return () => clearTimeout(timer);
  }, [skillValue, value]);
  return (
    <StyledProgressBar className={className} color={color} value={skillValue}>
      <span className="skill">{skill}</span>
      <span className="skill-value">{skillValue}%</span>
    </StyledProgressBar>
  );
};

这使skillValue能够统一更新到所需的值，并为进度条创建动画效果