Продолжить бесконечную CSS анимацию, которая останавливается до последнего кадра - PullRequest
Новая
       63

Продолжить бесконечную CSS анимацию, которая останавливается до последнего кадра

2 голосов
/ 13 июля 2020

У меня есть определенный CSS класс spin, который создает простой CSS счетчик анимации для элемента 

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spin {
  animation: spin .8s linear .15s infinite;
}

Класс spin добавляется и удаляется через JavaScript, однако при удалении класса анимация резко обрывается и отображается первый кадр. Есть ли способ, чтобы браузер продолжал анимировать элемент до тех пор, пока он не достигнет последнего кадра?

Я устал делать несколько комбинаций animation-fill-mode или устанавливать animation-iteration-count: 1 на "отдыхающем" элементе (т. Е. тот же элемент, если у него нет класса spin), но ничего не работает. Есть идеи, как это сделать?

1 Ответ

1 голос
/ 13 июля 2020

Если мы объединим его с событием animationiteration, мы сможем это сделать. 

const spin = document.querySelector(".spin");

let iterationCount = 0;
let isMouseover = 0;

spin.addEventListener('animationiteration', () => {
  iterationCount = 1;
  if (iterationCount && isMouseover) {
    spin.classList.remove("animation");
  } else {
    iterationCount = 0;
  }
});

spin.addEventListener("mouseover", () => {
  isMouseover = 1;
});

spin.addEventListener("mouseout", () => {
  isMouseover = 0;
  spin.classList.add("animation");
});
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spin {
  height: 100px;
  width: 100px;
  background: yellow;
  border-right: 4px solid green;
  border-left: 4px solid red;
  border-top: 4px solid black;
  border-bottom: 4px solid blue;
}

.spin.animation {
  animation: spin .8s linear .15s infinite;
}
<div class="spin animation"></div>

Также работает с щелчком: 

const spin = document.querySelector(".spin");

let iterationCount = 0;
let isClicked = 0;

spin.addEventListener('animationiteration', () => {
  iterationCount = 1;
  if (iterationCount && isClicked) {
    spin.classList.remove("animation");
  } else {
    iterationCount = 0;
  }
});

spin.addEventListener("click", () => {
  if (isClicked) {
    isClicked = 0;
    spin.classList.add("animation");
  } else {
    isClicked = 1;
  }
});
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spin {
  height: 100px;
  width: 100px;
  background: yellow;
  border-right: 4px solid green;
  border-left: 4px solid red;
  border-top: 4px solid black;
  border-bottom: 4px solid blue;
}

.spin.animation {
  animation: spin .8s linear .15s infinite;
}
<div class="spin animation"></div>
...