javascript - 当使用不同 Prop 渲染组件的多个实例时，关键帧动画不起作用？用于动画的宽度取决于 Prop 值

Question

所以问题陈述是这样的:- 我有一个进度条组件，它将 skillValue 作为 Prop ，然后基于这个 Prop ，我尝试添加动画，以便在初始加载时进度bar 从 0 到 skillValue 动画。为了更好地理解问题，我将首先向您展示 2 个案例。

案例 1:无动画。这是示例 CSS 代码。我利用 after 伪元素在栏上显示突出显示的部分，它的宽度取决于 Prop 值。在这种情况下，假设我遍历具有技能值 [90,85,70,75] 的数组，并显示具有这些值的 progressBar 组件。在这种情况下，我能够看到 4 个具有不同值的进度条，如数组中定义的那样，样式也是动态的。

  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:使用动画 现在，当我尝试根据采用类似 Prop 值的 Prop 值实现动画时，例如:[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 中，当我尝试根据动态属性值设置动画时。

Answer 1

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

这是我的组件逻辑。

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>
  );
};

样式逻辑是:

  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.value}%;
    border-radius: 5px;
  }

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