Анимация индикатора выполнения не приостановлена ​​должным образом ⇐ CSS

[Anonymous]

Я создал простую копию своего кода. У меня возникла проблема с управлением анимацией индикатора выполнения. Проблема в том, что после приостановки анимации вы можете видеть, что анимация идет немного назад и не приостанавливается в том месте, где она должна быть при нажатии кнопки. В чем проблема в моем коде?

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

const { useState, useEffect } = React; const App = () => { константное общее время = 10; const [timeLeft, setTimeLeft] = useState(totalTime); const [isTimerAnimated, setIsTimerAnimated] = useState(true); useEffect(() => { константный интервал = setInterval(() => { if (timeLeft > 0 && isTimerAnimated) { setTimeLeft((prevTimeLeft) => prevTimeLeft - 1); } }, 1000); return () => ClearInterval (интервал); }, [timeLeft, isTimerAnimated]); const handleAnimationState = () => { если (isTimerAnimated) { setIsTimerAnimated (ложь); } еще { setIsTimerAnimated (истина); setTimeLeft (общее время); } }; возвращаться ( {isTimerAnimated ? «Приостановить анимацию»: «Перезапустить анимацию» ); }; ReactDOM.render(, document.getElementById("root")); @keyframes timerAnimation { от { преобразование: масштабX(1); } к { преобразование: масштабX (0); } } .индикатор { высота: 10 пикселей; ширина: 300 пикселей; цвет фона: #fdb913; радиус границы: 10 пикселей; переполнение: скрыто; маржа-верх: 2рем; поле-дно: 3rem; } .прогресс-бар div { цвет фона: серый; высота: 100%; состояние анимации-воспроизведения: приостановлено; режим анимации-заполнения: вперед; Transform-Origin: левый центр; } .progress-bar div.animated { анимация: timerAnimation линейная; состояние анимации-воспроизведения: работает;