继续播放无限的CSS动画，直到最后一帧为止 [英] Continue an infinite CSS animation that gets stopped until its last frame

问题描述

我有一个已定义的CSS类 spin ，可在一个元素上创建一个简单的CSS动画微调器

I have a defined CSS class spin that creates a simple CSS animation spinner on an element

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

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

spin 类是通过JavaScript添加和删除的，但是，删除该类时，动画会突然剪切并显示第一帧.是否有办法让浏览器继续为元素设置动画，直到到达最后一帧?

The spin class is added and removed via JavaScript, however when the class is removed the animation abruptly cuts and the first frame is displayed. Is there are way to have the browser continue to animate the element until it reaches the last frame?

我厌倦了进行 animation-fill-mode 的多种组合，或在"resting"菜单上设置 animation-iteration-count:1 .元素(即没有 spin 类的元素)，但没有任何效果.任何想法如何使这项工作?

I tired doing multiple combinations of animation-fill-mode, or setting animation-iteration-count: 1 on the "resting" element (i.e., the same element when it does not have the spin class) but nothing worked. Any ideas how to make this work?

推荐答案

如果我们将其与

If we combine it with the animationiteration event, we can do it.

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>

也可以单击以进行操作:

Works with click also:

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>

这篇关于继续播放无限的CSS动画，直到最后一帧为止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！