Keyframmes en javascript

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
Gérardp76
Messages : 3
Enregistré le : 13 sept. 2024, 11:43

Keyframmes en javascript

Message par Gérardp76 » 13 sept. 2024, 11:59

Bonjour,
J'ai créé un petit programme de deux images. Lorsque l'on clique sur la première image elle se colorie en bleu, et clignote pendant quelques secondes, et la deuxième image se colorie en rouge.
Lorsque l'on clique sur la deuxième image, elle se colorie en bleu et clignote, et la première image de colorie en rouge.
Toutefois si l'on renouvelle l'opération, les couleurs alternent bien, mais le clignotement ne s'opère plus.
Je pense qu'il existe une solution, pour que le clignotement s'opère à chaque click.
Je joins ce petit programme ci-dessous :
Merci à l'avance si on peux me dépaner.
Gérard

<!DOCTYPE HTML>
<html>
<head>
<title>Clignotement de pion</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
<style>
#case1, #case2 {
width:50px;
height:50px;
display: block;
border: 1px solid black;
animation-duration: .2s;
animation-iteration-count: 15;
transition: none;
}
@keyframes clignoter {
0% { opacity:1; }
40% {opacity:0; }
100% { opacity:1; }
}

</style>
</head>
<body>
<h3>Clignotement de PION</h3>
<div id="case1"><img src="pionBlanc.png"></div>
<div id="case2"><img src="pionNoir.png"></div>

<script type="text/javascript">
const case1=document.getElementById("case1");
const case2=document.getElementById("case2");

case1.addEventListener ('click', function() {x=1; case1.style.backgroundColor="cyan"; couleur()});
case2.addEventListener ('click', function() {x=2; case2.style.backgroundColor="cyan"; couleur()});

function couleur () {
if (x===1){case1.style.animationName="clignoter"; case2.style.backgroundColor="red"}
if (x===2){case2.style.animationName="clignoter";case1.style.backgroundColor="red"}
}

</script>
</body>
</html>

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

Re: Keyframmes en javascript

Message par webmaster » 15 sept. 2024, 11:31

Bonjour

Il faut ne pas oublier de reinitialiser l'animation à vide pour qu'elle puisse se relancer

Code : Tout sélectionner

function couleur () {
if (x===1){case1.style.animationName="clignoter"; case2.style.backgroundColor="red";case2.style.animationName="";}
if (x===2){case2.style.animationName="clignoter";case1.style.backgroundColor="red";case1.style.animationName=""}
}
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Gérardp76
Messages : 3
Enregistré le : 13 sept. 2024, 11:43

Re: Keyframmes en javascript

Message par Gérardp76 » 17 sept. 2024, 14:39

Bonjour,
Merci pour la réponse, mais le fait d'ajouter :( case1.style.animationName=" "; et case2.style.animationName=" "; ) supprime et annule purement et simplement la fonction du clignotement. Le clignotement ne fonctionne plus du tout.
Bien cordialement. Gérard

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

Re: Keyframmes en javascript

Message par webmaster » 17 sept. 2024, 20:26

Bizarre

d'apres mes essais, le clignotement se fait bien
https://www.toutjavascript.com/user/clignoter.html
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Gérardp76
Messages : 3
Enregistré le : 13 sept. 2024, 11:43

Re: Keyframmes en javascript

Message par Gérardp76 » 21 sept. 2024, 10:04

Bonjour,
Effectivement ça fonctionne. J'avais intervertit les cases 1 et 2 lors que la suppression "case1.style.animationName=" ";
Encotre merci.
Bonne journée. Gérard

Répondre