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>
Keyframmes en javascript
Re: Keyframmes en javascript
Bonjour
Il faut ne pas oublier de reinitialiser l'animation à vide pour qu'elle puisse se relancer
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
https://www.toutjavascript.com/livre/index.php
Re: Keyframmes en javascript
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
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
Re: Keyframmes en javascript
Bizarre
d'apres mes essais, le clignotement se fait bien
https://www.toutjavascript.com/user/clignoter.html
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
https://www.toutjavascript.com/livre/index.php
Re: Keyframmes en javascript
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
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