Why is my spin animation only working once when button is pressed?

Question

When the submit button is pressed, I need all the images to spin. However, this only happens the first time the button is pressed (until the next page refresh). I used jquery to add and remove class to the images when the button is pressed and the rotate animation is in my css.

I shortened my code until this, what is wrong? Thanks in advance

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>

Most likely it's related to the script removing and adding the class back, and not giving the browser time to adjust. — Taplar, Sep 01 '20 at 17:50
@mplungjan Wow when I did this, it is working now...any idea why? — , Sep 01 '20 at 17:54
*"however, in my actual code, I have more than diceRoll to run when the button is pressed"* - we can only go one what's provided - please be ensure to include all the relevant details such as this (don't need specifics, just that there's more to it) — freedomn-m, Sep 02 '20 at 07:53

score 0 · Answer 1 · answered Sep 01 '20 at 18:16

I feel this can be done with the good ol' css way!

Just make these changes in 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);
  }
}

js 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();

})

Hey @argonx, I've put it on [codepen](https://codepen.io/aajinkya1029/pen/vYGeBEy) — Aajinkya Singh, Sep 01 '20 at 18:25
Good to hear that! A word of advice, upvote any post that gives you the right result! — Aajinkya Singh, Sep 01 '20 at 18:31

hgb123 · Accepted Answer · 2020-09-01T18:28:18.327

You could try to listen to animation end, and disable the go button when it 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>

THANK YOU! So I assume that if the end of the event is not listened to, the submit button is still active- that was the issue? — , Sep 01 '20 at 18:22
@argonx yes, it is, because transition takes time, so better to listen to its event to avoid mess. And about `$("a#submit")` I just want to specify it more clear (`a tag with id of submit`). Leave it `$("#submit")` should still work well — hgb123, Sep 01 '20 at 18:27

Why is my spin animation only working once when button is pressed?

2 Answers2