Les problèmes sont:
- mon animation se lance après l'alerte (j'ai essayé de faire un setTimeOut sur l'alerte sans succès ou mal fait)
-mon animation ne se fait que une fois (normal vu que ça crée une classe)
j'aimerai donc que l'alerte se lance après l'animation et que celle-ci se rejoue à chaque click sur le bouton...
ça fait des jours que je me creuse la tête et regarde un peu partout...
Merci de votre aide.
voivi une partie du html:
Code : Tout sélectionner
<ion-col size="auto" size-md id="colCenter">
<div id="spaceToPlay">
<section id="dice">
<div class="side" id="front">1</div>
<div class="side" id="back">2</div>
<div class="side" id="left">3</div>
<div class="side" id="right">4</div>
<div class="side" id="top">5</div>
<div class="side" id="bottom">6</div>
</section>
</div>
</ion-col>
<ion-col size="auto" size-md>
<h3 class="ion-text-center">
Score
</h3>
<div class="ion-text-center" id="score2">
10
</div>
</ion-col>
</ion-row>
<ion-row id="bottomRow">
<ion-col class="ion-text-center">
<div>CURRENT</div>
<div id="currentScore1">0</div>
</ion-col>
<ion-col class="ion-text-center">
<button class="favorite styled" type="button" id="roll" onclick="rollDice()">
Lancer le dé
</button>
Code : Tout sélectionner
/*Animation du dé*/
.rotate-vert-center {
animation: rotate-vert-center 2s linear 1 both;
}@keyframes rotate-vert-center {
0% {
transform: translate(150%, -150%) rotate(0)
}
25% {
transform: translateX(0px) rotate(-0.7turn);
animation-timing-function: cubic-bezier(.25,.06,.87,.86);
}
50% {
transform: translateX(-700%) rotate(-1.5turn);
animation-timing-function: linear;
}
75% {
transform: translate(-100%, 200%) rotate(1turn);
}
100% {
transform: translate(0);
}
}
}
Code : Tout sélectionner
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min+1) ) + min;
}
function rollDice() {
document.getElementById("dice").classList.add("rotate-vert-center");
}
const roll = document.getElementById("roll")
roll.addEventListener('click',()=>{
let numberRandom = getRandomInt(1, 6)
alert(`vous avez eu ${numberRandom}`)
})