What could be the reason my spin animation is only triggered once upon button press?

Question

What could be the reason my spin animation is only triggered once upon button press?

Every time the submit button is clicked, I want all the images to spin. However, this rotation effect only works the first time the button is pressed, until the page is refreshed. I have used jQuery to add and remove a class from the images when the button is clicked, and the rotate animation is defined in my CSS.

I've streamlined my code to this point, but something seems off. Any help would be greatly appreciated!

function diceRoll() {
  $(".dice").removeClass("rotate");
  $(".dice").addClass("rotate");
}

document.getElementById("submit").addEventListener("click", function(e) {
  e.preventDefault();

  diceRoll();

})

/* Images */

img {
  width: 70px;
  line-height: 0;
  margin: 0 1%;
  display: flex;
  justify-content: center;
  display: inline;
}

figure {
  display: inline-block;
  vertical-align: middle;
}

.rotate {
  animation: rotation 0.1s infinite linear;
  animation-iteration-count: 2;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

<title>Diceey</title>

<!-- Bootstrap, CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="styles2.css">

<!-- Jquery Links -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>

<body>

  <div class="container-fluid heading">
    <h1 id="title"> Hello there</h1>
    <h5>Press to roll dice</h5>
  </div>

  <div class="container-fluid instructions">

    <!-- Images -->
    <div class="container-fluid">

      <div class="container-of-images">
        <figure>
          <img id="img1" class="dice" src="https://image.ibb.co/nFqkvx/dice6.png">
        </figure>

        <figure>
          <img id="img2" class="dice" src="https://image.ibb.co/nFqkvx/dice6.png">
        </figure>

        <figure class="threeChoices">
          <img id="img3" class="dice" src="https://image.ibb.co/nFqkvx/dice6.png">
        </figure>

        <figure class="fourChoices">
          <img id="img4" class="dice" src="https://image.ibb.co/nFqkvx/dice6.png">
        </figure>
      </div>
    </div>

    <div class="container-fluid">

      <div class="container-of-forms">
        <a href="" id="submit" class="btn btn-info btn-lg" role="button">Go</a>
      </div>
      <script src="index2.js" charset="utf-8">
      </script>
</body>

<footer>
</footer>

javascript jquery css bootstrap-4

Answer 1

Answer №1

One approach could be to listen for the animation end event and then disable the "go" button while the dice is rotating.

function diceRoll() {
  $("a#submit").addClass("disabled")
  $(".dice").addClass("rotate");
  $(".dice").on("webkitAnimationEnd oanimationend msAnimationEnd animationend", function() {
    $("a#submit").removeClass("disabled")
    $(".dice").removeClass("rotate");
  })
}

function diceRoll() {
  $("#submit").addClass("disabled")
  $(".dice").addClass("rotate");
  $(".dice").on("webkitAnimationEnd oanimationend msAnimationEnd animationend", function() {
    $("#submit").removeClass("disabled")
    $(".dice").removeClass("rotate");
  })
}

document.getElementById("submit").addEventListener("click", function(e) {
  e.preventDefault();
  diceRoll();
})

img {
  width: 70px;
  line-height: 0;
  margin: 0 1%;
  display: flex;
  justify-content: center;
  display: inline;
}

figure {
  display: inline-block;
  vertical-align: middle;
}

.rotate {
  animation: rotation 0.1s infinite linear;
  animation-iteration-count: 2;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Diceey</title>

  <!-- Bootstrap, CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <link rel="stylesheet" href="styles2.css">

  <!-- Jquery Links -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>

<body>

  <div class="container-fluid heading">
    <h1 id="title"> Hello there</h1>
    <h5>Press to roll dice</h5>
  </div>

  <div class="container-fluid instructions">

    <!-- Images -->
    <div class="container-fluid">

      <div class="container-of-images">
        <figure>
          <img id="img1" class="dice" src="https://miro.medium.com/max/512/1*15_KIo9vPHULoA98NYT9jQ.png">
        </figure>

        <figure>
          <img id="img2" class="dice" src="https://miro.medium.com/max/512/1*15_KIo9vPHULoA98NYT9jQ.png">
        </figure>

        <figure class="threeChoices">
          <img id="img3" class="dice" src="https://miro.medium.com/max/512/1*15_KIo9vPHULoA98NYT9jQ.png">
        </figure>

        <figure class="fourChoices">
          <img id="img4" class="dice" src="https://miro.medium.com/max/512/1*15_KIo9vPHULoA98NYT9jQ.png">
        </figure>
      </div>
    </div>

    <div class="container-fluid">

      <div class="container-of-forms">
        <a href="" id="submit" class="btn btn-info btn-lg" role="button">Go</a>
      </div>
      <script src="index2.js" charset="utf-8">
      </script>
</body>

<footer>
</footer>



</html>

Answer 2

One approach could be to listen for the animation end event and then disable the "go" button while the dice is rotating.

function diceRoll() {
  $("a#submit").addClass("disabled")
  $(".dice").addClass("rotate");
  $(".dice").on("webkitAnimationEnd oanimationend msAnimationEnd animationend", function() {
    $("a#submit").removeClass("disabled")
    $(".dice").removeClass("rotate");
  })
}

function diceRoll() {
  $("#submit").addClass("disabled")
  $(".dice").addClass("rotate");
  $(".dice").on("webkitAnimationEnd oanimationend msAnimationEnd animationend", function() {
    $("#submit").removeClass("disabled")
    $(".dice").removeClass("rotate");
  })
}

document.getElementById("submit").addEventListener("click", function(e) {
  e.preventDefault();
  diceRoll();
})

img {
  width: 70px;
  line-height: 0;
  margin: 0 1%;
  display: flex;
  justify-content: center;
  display: inline;
}

figure {
  display: inline-block;
  vertical-align: middle;
}

.rotate {
  animation: rotation 0.1s infinite linear;
  animation-iteration-count: 2;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Diceey</title>

  <!-- Bootstrap, CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <link rel="stylesheet" href="styles2.css">

  <!-- Jquery Links -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>

<body>

  <div class="container-fluid heading">
    <h1 id="title"> Hello there</h1>
    <h5>Press to roll dice</h5>
  </div>

  <div class="container-fluid instructions">

    <!-- Images -->
    <div class="container-fluid">

      <div class="container-of-images">
        <figure>
          <img id="img1" class="dice" src="https://miro.medium.com/max/512/1*15_KIo9vPHULoA98NYT9jQ.png">
        </figure>

        <figure>
          <img id="img2" class="dice" src="https://miro.medium.com/max/512/1*15_KIo9vPHULoA98NYT9jQ.png">
        </figure>

        <figure class="threeChoices">
          <img id="img3" class="dice" src="https://miro.medium.com/max/512/1*15_KIo9vPHULoA98NYT9jQ.png">
        </figure>

        <figure class="fourChoices">
          <img id="img4" class="dice" src="https://miro.medium.com/max/512/1*15_KIo9vPHULoA98NYT9jQ.png">
        </figure>
      </div>
    </div>

    <div class="container-fluid">

      <div class="container-of-forms">
        <a href="" id="submit" class="btn btn-info btn-lg" role="button">Go</a>
      </div>
      <script src="index2.js" charset="utf-8">
      </script>
</body>

<footer>
</footer>



</html>

Answer 3

Answer №2

Utilizing the timeless power of CSS is my proposed solution for this task!

To implement these adjustments, simply modify your:

CSS file

img {
  width: 70px;
  line-height: 0;
   margin: 0 1%;
   display: flex;
   justify-content: center;
   display: inline;
}
 

figure {
  display: inline-block;
  vertical-align: middle;
}

.rotate {
  animation: rotation 0.1s infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  50%{
    transform: rotate(360deg)
  }
  100% {
    transform: rotate(0deg);
  }
}

JavaScript file

let a = document.querySelectorAll('.dice')
function diceRoll() {
  a.forEach(elem => {
    elem.classList.add("rotate");
    setTimeout(()=>{
      elem.classList.remove("rotate")
    }, 200)
  })

}

document.getElementById("submit").addEventListener("click", function(e) {
  e.preventDefault();
  diceRoll();

})

Answer 4

Utilizing the timeless power of CSS is my proposed solution for this task!

To implement these adjustments, simply modify your:

CSS file

img {
  width: 70px;
  line-height: 0;
   margin: 0 1%;
   display: flex;
   justify-content: center;
   display: inline;
}
 

figure {
  display: inline-block;
  vertical-align: middle;
}

.rotate {
  animation: rotation 0.1s infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  50%{
    transform: rotate(360deg)
  }
  100% {
    transform: rotate(0deg);
  }
}

JavaScript file

let a = document.querySelectorAll('.dice')
function diceRoll() {
  a.forEach(elem => {
    elem.classList.add("rotate");
    setTimeout(()=>{
      elem.classList.remove("rotate")
    }, 200)
  })

}

document.getElementById("submit").addEventListener("click", function(e) {
  e.preventDefault();
  diceRoll();

})

What could be the reason my spin animation is only triggered once upon button press?

Answer №1

Answer №2

Similar questions

Managing sessions with jQuery

Concealing the initial table upon the arrival of the second table

Creating a visually appealing layout with Bootstrap 4's responsive card columns featuring cards of equal

An AJAX request will only occur if there is an alert triggered on a particular computer

It is essential for Jquery to properly evaluate the first JSON result, as skipping

Ways to extract text from a temporary element

What is the best way to extract text from a class using selenium?

Looking for a jQuery plugin that creates a sticky top menu bar?

What is the best way to modify tabulator styles?

Guide on incorporating geolib into React Native for distance calculation of two locations

AngularJS ng-repeat is not updating when the state changes

Triggering the onChangeMonthYear() event manually for jQuery datepicker

Encountering excessive re-renders while using MUI and styled components

Adjust the background color and transparency of a specific section using HTML

Is it possible to apply two ngClass directives to a single div element in Angular 4?

What are some strategies for transferring data using ajax?

Delay the closure of a window by utilizing a straightforward method when selecting the "X - CLOSE" option with the following code: `<a href="javascript:window.open('', '_self').close();">X - CLOSE</a>`

What causes the string to be treated as an object in React Native?

Stopping HTML 5 video playback while transitioning to a different webpage

Creating a New Form Dynamically and Using Ajax to Submit it