animation on every click
I am trying to create an animation for every dice roll, but it only occurs once and then stops. How can I fix this?
https://codepen.io/etrbbr/pen/azoKQrx
7 Replies
you need to restart the animation
a simple way to do it (and add some needed debouncing) is to listen for the animationend event, and then remove the class that triggers the animation
i was thinking about it. do i need to remove it in my function?
no, add and remove it in the function
just in case someone will need it here solution and it works:
const rollDiceBtn = document.querySelector(".buttonRoll");
const animationAdd = document.querySelector(".imgDice5");
rollDiceBtn.addEventListener("click", function () {
let randomDice = Math.trunc(Math.random() * 6) + 1;
animationAdd.src =
dice-${randomDice}.svg;
let animationOnDice = "rollDice 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55)";
animationAdd.style.animation = animationOnDice;
});
animationAdd.addEventListener("animationend", function () {
animationAdd.style.animation = "";
});
i just added
animationAdd.addEventListener("animationend", function () {
animationAdd.style.animation = "";
});
i have one more question. id like to add "history" of rolls, like roll 1 and result
roll 2 and result. but i kinda dont understand how i add image
i am using counter to count amounf of rolls, here is code
amountOfRolls += 1;
li.appendChild(document.createTextNode(Roll ${amountOfRolls}:));
rollHistoryUl.appendChild(li);can you add proper syntax highlighting to this, please?
it's almost impossible to read anything
sorry i will send codepen rn
https://codepen.io/etrbbr/pen/ZYzRwpb
i have a suggestion for you
instead of having 6 external svg files, why don't you throw the dice into a single svg, added inline, with symbols?
and if you want some sort of history, you can store the values in an array, then display it
but clear out old values