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>
2 answers
solution1
0 2020-09-01 18:16:48
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();
})
solution2
0 ACCPTED 2020-09-01 18:16:50
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Why is my AngularJs 'add' button only working once?
Javascript - Animation only working the first time the button is pressed
JavaScript Button Pressed Only Once
When button pressed or held, action only happens once
Button JQuery event only working once, why?
Why does the submit button only work when pressed twice on my example?
Why does my CSS animation run only once when toggling between classes just differ in animation-direction?
How do i add a button to this JavaScript/HTML code, so that my code only runs once the button is pressed?
CSS animation only working once
how to change the action of a form when the submit button is pressed || make the submit button clickable only once?
Related Tags