Анимация ключевых кадров не работает, когда несколько экземпляров компонента отображаются с разными реквизитами? Ширина, используемая для анимации, зависит от значения реквизита

Question

Таким образом, постановка задачи выглядит следующим образом : - У меня есть компонент индикатора выполнения, который принимает skillValue в качестве подпорки, а затем, основываясь на этом подпорке, я попытался добавить анимацию так, чтобы при начальной загрузке индикатора выполненияоживляет от 0 до skillValue. Сначала я представлю вам 2 случая для лучшего понимания проблемы.

CASE1: Без анимации . Это пример кода CSS. Я использую псевдоэлемент после, чтобы отобразить выделенную часть на панели, и ее ширина зависит от значения пропеллера. В этом сценарии предположим, что я перебираю массив со значениями умений [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;
  }

CASE 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, когда я пытаюсь его анимировать на основе значений динамического реквизита.

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для равномерного обновления до нужного значения и создания эффекта анимации для индикатора выполнения.