CSS动画不会每次点击播放答案

【问题标题】：CSS Animation Won't Play Per ClickCSS动画不会每次点击播放
【发布时间】：2021-03-08 16:46:50
【问题描述】：

我为一些图像构建了一个轮播。我需要我的“下一个”和“上一个”按钮来使用我在我的 javascript 函数中为他们的事件侦听器分配的 CSS 动画。动画只会播放一次，当再次单击按钮以导航轮播时动画不播放。我需要按钮在每次点击时都放大和缩小。

这是 CSS：

.carousel-actions {
  position: absolute;
  display: flex;
  justify-content: space-between;
  width: 105%;
  top: 30%;
}
.carousel-actions button {
  padding: 30px 50px;
  background-color: rgba(255, 255, 255, 0.329);
  font-weight: 900;
  cursor: pointer;
  border-radius: 100px;
  border: 0;
  font-size: 60px;
  color: black;
  outline: none;
}
@keyframes grow {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

这是 HTML：

<div class="carousel-actions">
  <button id="prev" aria-label="Previous Slide"><</button>
  <button id="next" aria-label="Next Slide">></button>
</div>

这是 JS：

const slides = document.querySelectorAll(".carousel-item");

const totalSlides = slides.length;

let slidePosition = 0;
console.log(totalSlides);
const next = document.getElementById("next");
const prev = document.getElementById("prev");
function hideAllSlides() {
  for (const slide of slides) {
    slide.classList.remove("carousel-item-visible") &&
      slide.classList.add("carousel-item-hidden");
  }
}

function nextSlide() {
  hideAllSlides();
  if (slidePosition === totalSlides - 1) {
    slidePosition = 0;
  } else {
    slidePosition++;
  }
  slides[slidePosition].classList.add("carousel-item-visible");
  next.style.animation = "grow 1s";
}
function prevSlide() {
  hideAllSlides();
  if (slidePosition === 0) {
    slidePosition = totalSlides - 1;
  } else {
    slidePosition--;
  }
  slides[slidePosition].classList.add("carousel-item-visible");
  prev.style.animation = "grow 1s";
}
next.addEventListener("click", nextSlide);
prev.addEventListener("click", prevSlide);

【问题讨论】：

您在此处发布的代码没有保留任何格式并包含一些语法错误 - 请您检查一下并确保这完全您打算发布它?很难按原样解析。
@esqew 你的意思是我应该缩进它吗？我不知道我的代码中有任何语法错误。我没有包含项目中的所有代码，因为我认为没有必要。
你绝对应该缩进它，至少在这里为了其他人的可读性。就语法而言，对于初学者来说：slide.classList.remove('carousel-item-visible') && slide.classList.add('carousel- 行并不完整，实际上会引发有关语法的错误。最后，我根本不建议您在问题中包含整个项目的代码——这不仅是不可能的，而且也没有帮助。确保您提供的代码符合Minimal, Reproducible Example 准则。
@esqew slide.classList.remove('carousel-item-visible') && slide.classList.add('carousel- 仅在 stackoverflow 上继续到下一行。它只是因为stackoverflow上的代码格式而被切断。这里没有语法错误，因为整行代码显然是slide.classList.remove('carousel-item-visible') && slide.classList.add('carousel-item-hidden');
不幸的是，我没有看到相同的内容。对我来说，那个地方有一个明确的换行符。通常，代码块不会换行到下一行，而是在一行对于问题的宽度而言太宽时引入水平滚动条。

标签： javascript html css

【解决方案1】：

问题之所以出现，是因为一旦系统播放了动画，它就会认为“好吧，我已经播放过了”。再次将其设置为相同不会使其再次播放。

要解决这个问题，您可以在动画完成后取消设置。

在您的代码中为 animationend 事件添加一个事件监听器。

这是一个简化的例子：

const div = document.querySelector('div');
div.addEventListener('click', function() { div.style.animationName='grow';});
div.addEventListener('animationend', function() { div.style.animationName='';});

div {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation-duration: 1s;
  animation-iteration-count: 1;
}
@keyframes grow {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }

&lt;div&gt;&lt;/div&gt;

【讨论】：