What could be the reason why both the add and remove functions are unable to work simultaneously within a JavaScript function?

Question

What could be the reason why both the add and remove functions are unable to work simultaneously within a JavaScript function?

Hi there! I recently started diving into JavaScript and encountered a little hiccup. I've been working on a dice game where images change randomly whenever a button is clicked.

The images transition from one to another, but I wanted to add a rolling effect to them. So, I went ahead and added some animations that rotated the images along both the X-axis and Y-axis. It seemed to work smoothly on the initial click, but failed thereafter.

To tackle this issue, I tried using classList.add() for applying the animation and classList.remove() to remove it. However, the removal function didn't quite do its job.

Here's a snippet of the HTML code I've been working on:

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 = "Player 1 wins!!!";
  else
  if (randomNumber2 > randomNumber1)
    document.querySelector("h1").innerHTML = "Player 2 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>

javascript html css css-transitions

Answer 1

Answer №1

The JavaScript function responsible for adding the rolling animation class operates independently from any set animation durations.

It will execute at the speed allowed by the device's performance capabilities.

In your JS code, it will:

apply the .rollEffect class to both images.
assign a new image URL.
display text indicating the outcome of the game.
remove the .rollEffect class from both images.

All of this occurs as quickly as possible, in microseconds or even nanoseconds.
The animation is applied and removed so swiftly that it may not be perceptible.

Wait briefly before removing the animation class to ensure the animation completes before cessation.

This can be accomplished using setTimeout For instance:

  setTimeout(() => {
    document.querySelectorAll("img")[0].classList.remove("rollEffect");
    document.querySelectorAll("img")[1].classList.remove("rollEffect");
  }, 100); // <--- Setting 100 here will trigger the callback after 100ms, equivalent to the animation duration.

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)
  }
  /* Remaining keyframe declarations follow */
}

.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>

Answer 2

The JavaScript function responsible for adding the rolling animation class operates independently from any set animation durations.

It will execute at the speed allowed by the device's performance capabilities.

In your JS code, it will:

apply the .rollEffect class to both images.
assign a new image URL.
display text indicating the outcome of the game.
remove the .rollEffect class from both images.

All of this occurs as quickly as possible, in microseconds or even nanoseconds.
The animation is applied and removed so swiftly that it may not be perceptible.

Wait briefly before removing the animation class to ensure the animation completes before cessation.

This can be accomplished using setTimeout For instance:

  setTimeout(() => {
    document.querySelectorAll("img")[0].classList.remove("rollEffect");
    document.querySelectorAll("img")[1].classList.remove("rollEffect");
  }, 100); // <--- Setting 100 here will trigger the callback after 100ms, equivalent to the animation duration.

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)
  }
  /* Remaining keyframe declarations follow */
}

.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>

What could be the reason why both the add and remove functions are unable to work simultaneously within a JavaScript function?

Answer №1

Similar questions

Tips for parsing data arrays in HTML templates

Acquiring HTML form data using JavaScript

Discover the ins and outs of integrating YAML front matter into your destination directory path

Updating the positions of Mesh objects in Three.js asynchronously

What is the best way to link a single post to a collection of posts?

Perform an action when the timer reaches zero

Creating interfaces for applications that are driven by events in JavaScript

My method for updating form input properties involves switching the disable attribute from "false" to "true" and vice versa

Ui-router experiencing issues with nested view loading due to changes in URL

What is the procedure for importing material UI components into the main class?

A guide on restricting overflow in React Spring Parallax 'pages'

Modify mouse pointer when an object is clicked using JavaScript

modifying the identification value in HTML and then reverting it

"Learn how to retrieve and assign a value to a select2 dropdown in Vue.js

Can PHP encode the "undefined" value using json_encode?

Using an array of JSON objects to set up a Backbone.js bootstrap-initialized application

Passing an ID in Next.js without showing it in the URL

Using Vue.js to eliminate duplicate values from a filtered array of objects

What is the process for extracting the value of a checkbox generated through JavaScript?

Arrays contain multiple elements, not just a single item