CSS анимация в JavaScript выполняется только один раз при повторном вызове функции

Оффтоп javascript
1

Проблема с повторным запуском анимации

Делаю игру для учебного проекта и столкнулся с проблемой. Создал анимацию кубика на CSS, которая показывает бросок кости. Хочу чтобы функция startGameRound() запускала анимацию два раза подряд с задержкой между ними.

Сейчас работает только вторая анимация throwPlayerTwo(), первая throwPlayerOne() не показывается. Пробовал разные варианты с таймерами, но результат тот же.

Основная функция:

function startGameRound() {
    throwPlayerOne();
    
    window.setTimeout(() => { }, 2000);
    
    throwPlayerTwo();
}

function throwPlayerOne() {
    var firstPlayerResult = generateRandomNumber();
    window.setTimeout(() => { updatePlayerOnePosition(firstPlayerResult) }, 1200);
    
    window.setTimeout(clearDiceState, 3500);
}

function throwPlayerTwo() {
    var secondPlayerResult = generateRandomNumber();
    window.setTimeout(() => { updatePlayerTwoPosition(secondPlayerResult) }, 5000);
    
    window.setTimeout(clearDiceState, 8000);
}

Функция анимации:

function generateRandomNumber() {
    clearDiceState();
    
    var resultDisplay = document.getElementById('diceDisplay');
    var randomValue = Math.floor(Math.random() * 6) + 1;
    
    document.getElementById('animationContainer').className = 'rollAnimation';
    resultDisplay.className = 'showResult';
    
    return randomValue;
}

CSS для анимации:

.rollAnimation {
    animation: wobble 0.3s;
    animation-iteration-count: 4;
}

@keyframes wobble {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(15deg) scale(1.1); }
    50% { transform: rotate(-10deg) scale(0.9); }
    75% { transform: rotate(5deg) scale(1.05); }
    100% { transform: rotate(0deg) scale(1); }
}

.showResult {
    opacity: 1;
    transition: opacity 0.8s ease-in;
}

Почему анимация не повторяется при втором вызове?

2

Проблема в том, что анимация не успевает завершиться перед повторным применением класса. Браузер игнорирует повторное назначение одного и того же класса. Убери класс сначала, потом через микротаск добавь обратно:

function generateRandomNumber() {
    var container = document.getElementById('animationContainer');
    container.className = ''; // сбрасываем
    
    setTimeout(() => {
        container.className = 'rollAnimation';
    }, 10);
    
    // остальной код
}

Так анимация будет срабатывать каждый раз заново.

3

Анимация не успевает сброситься между вызовами. Попробуй принудительно перезапустить её через void element.offsetWidth после смены класса - браузер пересчитает стили. Или замени setTimeout на requestAnimationFrame. Какой интервал между бросками планируешь?

4

у тебя проблема с таймингом анимации. startGameRound() запускает обе анимации сразу, а setTimeout на 2 секунды не работает. Вторая анимация просто затирает первую.

Оберни throwPlayerTwo() в setTimeout:

function startGameRound() {
    throwPlayerOne();
    
    window.setTimeout(() => { 
        throwPlayerTwo();
    }, 4000); // дай время первой анимации завершиться
}

Тогда вторая анимация запустится только после завершения первой.