Я вращаю круг до 180 ° после этой анимации, круг возвращается к 0 ° от того места, где он начинался. Я уверен, что это потому, что я вызвал его в функции, которая запускается onclickevent, и состояние кругового объекта (#XOWheel) не сохранено (потому что я не знаю, как это сделать)

function showWhoIs() {
  console.log(main.stats.currentPlayerIdx); // 0 = O | 1 = X
  document.querySelector('#XOWheel').animate([
    { transform: 'rotate(0deg)' },
    { transform: 'rotate(180deg)' }
  ], {
    duration: 1000,
    iterations: 1
  });
}

Есть ли лучший способ сделать то, что я сделал здесь? А что я делаю не так?

0
TsgabiXD 2 Мар 2021 в 14:03

1 ответ

Лучший ответ

Поведение анимации после завершения можно указать с помощью свойства animation-fill-mode. https://developer.mozilla.org/en- США / docs / Web / CSS / animation-fill-mode

Вы также можете установить это с помощью API веб-анимации, используя словарь EffectTiming . https://developer.mozilla.org/en-US/ docs / Web / API / EffectTiming / fill

1
CBroe 2 Мар 2021 в 11:32