为什么添加和删除函数不能在 JavaScript 中的函数中同时工作？答案

【问题标题】：Why add and remove function is not working at the same time in a function in JavaScript?为什么添加和删除函数不能在 JavaScript 中的函数中同时工作？
【发布时间】：2022-01-05 15:25:37
【问题描述】：

我最近开始学习 JS，一直卡在这里。我创建了一个骰子游戏，点击按钮时图像会随机变化。

图像只是从一张更改为另一张。我想给他们一个滚动的效果。所以，我为它们添加了动画，它们改变了 X 轴和 Y 轴的角度。它在第一次点击时起作用，但后来不起作用。

所以我添加了classList.add() 来提供动画并添加classList.remove() 来删除，但是删除功能不起作用。

这是 HTML 代码：

function roll() {
  document.querySelectorAll("img")[0].classList.add("rollEffect");
  document.querySelectorAll("img")[1].classList.add("rollEffect");
  var randomNumber1 = Math.floor(Math.random() * 6 + 1);
  var randomNumber2 = Math.floor(Math.random() * 6 + 1);
  var randomImage1 = "dice" + randomNumber1 + ".png";
  var randomImage2 = "dice" + randomNumber2 + ".png";
  document.querySelectorAll("img")[0].setAttribute("src", randomImage1);
  document.querySelectorAll("img")[1].setAttribute("src", randomImage2);

  if (randomNumber1 > randomNumber2)
    document.querySelector("h1").innerHTML = "Player1 wins!!!";
  else
  if (randomNumber2 > randomNumber1)
    document.querySelector("h1").innerHTML = "Player2 wins!!!";
  else
    document.querySelector("h1").innerHTML = "DRAW!!!";
  document.querySelectorAll("img")[0].classList.remove("rollEffect");
  document.querySelectorAll("img")[1].classList.remove("rollEffect");
}

.btn {
  background-color: #8843F2;
  border: 0;
  border-radius: 20px;
  color: #ffffff;
  font-family: 'Indie Flower', cursive;
  margin: 0 50px;
  padding: 1% 2%;
}

.container {
  width: 70%;
  margin: auto;
  text-align: center;
}

.dice {
  text-align: center;
  display: inline-block;
}

@keyframes rollClick {
  9% {
    transform: rotateX(30deg) rotateY(30deg)
  }
  18% {
    transform: rotateX(60deg) rotateY(60deg)
  }
  28% {
    transform: rotateX(90deg) rotateY(90deg)
  }
  37% {
    transform: rotateX(120deg) rotateY(120deg)
  }
  46% {
    transform: rotateX(150deg) rotateY(150deg)
  }
  55% {
    transform: rotateX(180deg) rotateY(180deg)
  }
  65% {
    transform: rotateX(210deg) rotateY(210deg)
  }
  76% {
    transform: rotateX(240deg) rotateY(240deg)
  }
  85% {
    transform: rotateX(270deg) rotateY(270deg)
  }
  90% {
    transform: rotateX(300deg) rotateY(300deg)
  }
  95% {
    transform: rotateX(330deg) rotateY(330deg)
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg)
  }
}

.rollEffect {
  animation-name: rollClick;
  animation-duration: 0.1s;
}

body {
  background-color: #F9D371;
}

img {
  width: 80%;
}

<div class="container">
  <h1>Roll us</h1>
  <div class="dice">
    <p>Player 1</p>
    <img class="img1" src="dice6.png">
  </div>
  <div class="dice">
    <p>Player 2</p>
    <img class="img2" src="dice6.png">
  </div>
  <button class="btn" onclick="roll()">Roll</button>
 </div>

【问题讨论】：

在尝试您的代码时，出现rollAnimation 未定义的错误。
很抱歉。我忘了删除那个函数调用。

标签： javascript html css css-transitions

【解决方案1】：

添加滚动动画类的 javascript 代码独立于任何动画持续时间运行。

它将在设备性能允许的范围内以最快的速度运行。

在您的 js 代码中：

将.rollEffect 类添加到两个图像中。
设置新的图片网址。
用游戏结果设置文本
从两个图像中删除 .rollEffect 类。

这一切都尽可能快地发生，我们说的是微秒/纳秒。
所以动画每次都会被应用，每次都会被删除。快到连动画都看不到。

您必须稍等片刻才能删除动画类。所以动画在被移除之前有时间运行。

这可以通过setTimeout 来实现例如：

  setTimeout(() => {
    document.querySelectorAll("img")[0].classList.remove("rollEffect");
    document.querySelectorAll("img")[1].classList.remove("rollEffect");
  }, 100); // <--- 100 here will execute the code in the callback after 100ms, the same as the animation time.

function roll() {
  document.querySelectorAll("img")[0].classList.add("rollEffect");
  document.querySelectorAll("img")[1].classList.add("rollEffect");
  var randomNumber1 = Math.floor(Math.random() * 6 + 1);
  var randomNumber2 = Math.floor(Math.random() * 6 + 1);
  var randomImage1 = `http://placekitten.com/g/${50*randomNumber1}/300`;
  var randomImage2 = `http://placekitten.com/g/200/${50*randomNumber2}`;
  document.querySelectorAll("img")[0].setAttribute("src", randomImage1);
  document.querySelectorAll("img")[1].setAttribute("src", randomImage2);

  if (randomNumber1 > randomNumber2)
    document.querySelector("h1").innerHTML = "Player1 wins!!!";
  else
  if (randomNumber2 > randomNumber1)
    document.querySelector("h1").innerHTML = "Player2 wins!!!";
  else
    document.querySelector("h1").innerHTML = "DRAW!!!";

  setTimeout(() => {
    document.querySelectorAll("img")[0].classList.remove("rollEffect");
    document.querySelectorAll("img")[1].classList.remove("rollEffect");
  }, 100);
}

.btn {
  background-color: #8843F2;
  border: 0;
  border-radius: 20px;
  color: #ffffff;
  font-family: 'Indie Flower', cursive;
  margin: 0 50px;
  padding: 1% 2%;
}

.container {
  width: 70%;
  margin: auto;
  text-align: center;
}

.dice {
  text-align: center;
  display: inline-block;
}

@keyframes rollClick {
  9% {
    transform: rotateX(30deg) rotateY(30deg)
  }
  18% {
    transform: rotateX(60deg) rotateY(60deg)
  }
  28% {
    transform: rotateX(90deg) rotateY(90deg)
  }
  37% {
    transform: rotateX(120deg) rotateY(120deg)
  }
  46% {
    transform: rotateX(150deg) rotateY(150deg)
  }
  55% {
    transform: rotateX(180deg) rotateY(180deg)
  }
  65% {
    transform: rotateX(210deg) rotateY(210deg)
  }
  76% {
    transform: rotateX(240deg) rotateY(240deg)
  }
  85% {
    transform: rotateX(270deg) rotateY(270deg)
  }
  90% {
    transform: rotateX(300deg) rotateY(300deg)
  }
  95% {
    transform: rotateX(330deg) rotateY(330deg)
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg)
  }
}

.rollEffect {
  animation-name: rollClick;
  animation-duration: 0.1s;
}

body {
  background-color: #F9D371;
}

img {
  width: 150px;
  height: 150px;
}

<div class="container">
  <h1>Roll us</h1>
  <div class="dice">
    <p>Player 1</p>
    <img class="img1" src="http://placekitten.com/g/200/300">
  </div>
  <div class="dice">
    <p>Player 2</p>
    <img class="img2" src="http://placekitten.com/g/300/200">
  </div>
  <button class="btn" onclick="roll()">Roll</button>
</div>

【讨论】：