liaison css et js

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
stephbiesheim
Messages : 2
Enregistré le : 04 févr. 2021, 21:15

liaison css et js

Message par stephbiesheim » 04 févr. 2021, 21:25

Bonjour, j'ai réussi à lier mon animation css avec un bouton en js.
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>
une partie du css:

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);
    }
  }
}
et enfin une partie du js:

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}`)
})

Avatar du membre
webmaster
Administrateur du site
Messages : 396
Enregistré le : 28 févr. 2017, 15:19

Re: liaison css et js

Message par webmaster » 05 févr. 2021, 10:46

Bonjour,

J'ai repris le script en entier
Il y a deja un onclick=" rollDice(); " sur le bouton

Donc la partie addeventlistener est a supprimer

Il faut completer la fonction rolldice() :

Code : Tout sélectionner

function rollDice() {
  let numberRandom = getRandomInt(1, 6)
  document.getElementById("dice").classList.add("rotate-vert-center");
  setTimeout(function() {
    alert(`vous avez eu ${numberRandom}`) /* Affichage */
    document.getElementById("dice").classList.remove("rotate-vert-center"); /* reset anim */
  }, 1200); /* Attendre que l'animation se termine (affiner le timer) */
}
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

stephbiesheim
Messages : 2
Enregistré le : 04 févr. 2021, 21:15

Re: liaison css et js

Message par stephbiesheim » 06 févr. 2021, 11:35

Oh merci merci, je commençais à plus avoir de cheveux👍👍👍

Répondre