Fonction Keyframes en javascript

Version imprimable

1 pi�ce(s) jointe(s)

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 (sans les deux images).
Merci � l'avance si on peux me d�paner.Pi�ce jointe 659266

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!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>

G�rard

13/09/2024, 18h11
NoSmoking
Bonjour,

Citation:

Je pense qu'il existe une solution, pour que le clignotement s'op�re � chaque click.

oui, en fin d'animation il faut supprimer l'animation-name du style de ton �l�ment pour qu'elle se rejoue sinon il ne se passe rien.

Exemple de solution :
Code:

1 2 3 4 5 [case1, case2].forEach((el) => { el.onanimationend = function() { el.style.animationName = "none"; } });
Ressources :
- AnimationEvent
- Element: animationend event
15/09/2024, 10h30
G�rardp76

Keyframmes javascript

Bonjour NoSmoking,
Merci de votre r�ponse. Pribl�me r�solu. Tout fonctione correctement.
Bonne journ�e.
Cordialement. G�rard

Compl�ment

La solution retenue ci-dessus souffre de plusieurs d�fauts, � savoir que si tu ajoutes d'autres �l�ments devant clignoter il te faudra reprendre les fonctions pour ajouter ceux-ci ce qui va vite complexifier le code.

De plus, au clic sur un �l�ment le clignotement en cours n'est pas interrompu, mais cela est peut-�tre voulu.

Une solution qui a fait ses preuves et l'ajout/suppression d'une classe CSS pour la gestion des effets.

Le ciblage des �l�ments pour affectation des �v�nements ce fait via la m�thode querySelectorAll("selector") et non plus via des id.

Exemple HTML

Code:

1
2
3
<div class="blink-animation pion-blanc"></div>
<div class="blink-animation pion-noir"></div>
<!-- autant que l'on en veut -->

... avec une r�cup�ration comme suit :

Code:

const animElements = document.querySelectorAll(".blink-animation");

Dans le cas o� l'on souhaite conserver le principe de fonctionnement initial on pourrait avoir :

Au clic on ajoute la classe CSS prenant en compte l'animation ;
en fin d'animation, on enl�ve cette classe CSS.

Code:

1
2
3
4
5
6
7
8
9
10
11
const animElements = document.querySelectorAll(".blink-animation");
animElements.forEach((el) => {
  el.addEventListener("click", () => {
    // ajout de la classe à l'élément cliqué
    el.classList.add("clignotement");
  });
  el.addEventListener("animationend", () => {
    // suppression de la classe en fin d'animation
    el.classList.remove("clignotement");
  })
});

Maintenant si l'on souhaite qu'� chaque nouveau clic toutes les animations en cours s'arr�tent il faut :

Au clic on enl�ve la classe CSS sur tous les �l�ments ;
on ajoute la classe CSS sur l'�l�ment.

... et modifier le code comme suit

Code:

1
2
3
4
5
6
7
8
9
10
11
const animElements = document.querySelectorAll(".blink-animation");
animElements.forEach((el, ind, arr) => {
  el.addEventListener("click", (e) => {
    // on arrête toutes les animations encours en supprimant la classe à tous les éléments
    arr.forEach((a) => {
      a.classList.remove("clignotement");
    });
    // ajout de la classe à l'élément cliqué
    el.classList.add("clignotement");
  });
});

L'avantage de ces des deux derniers codes est qu'ils fonctionneront quelque soit le nombre d'�l�ments ayant la classe CSS blink-animation.

Et pour finir le CSS associ� :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.blink-animation {
  display: block;
  width: 50px;
  height: 50px;
  border: 1px solid #000;
  background-color: #F88;
  cursor: pointer;
}
.clignotement {
  background-color: #6FF;
  animation-name: clignoter;
  animation-duration: .2s;
  animation-iteration-count: 15;
}

Et pour vraiment finir code de test du dernier script :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clignotement de pion</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d2169800">
<meta name="category" content="js">
<meta name="description" content="Multiple clignotement d'éléments.">
<style>
.blink-animation {
  display: block;
  width: 50px;
  height: 50px;
  border: 1px solid #000;
  background-color: #F88;
  cursor: pointer;
}
.clignotement {
  background-color: #6FF;
  animation-name: clignoter;
  animation-duration: .2s;
  animation-iteration-count: 15;
}
 
@keyframes clignoter {
  0%   { opacity:1; }
  40%   {opacity:0; }
  100% { opacity:1; }
}
 
.pion-blanc:before,
.pion-noir:before {
  content: "";
  display: block;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  margin: 10%;
}
.pion-blanc:before {
  background-color: #FFF;
}
.pion-noir:before {
  background-color: #000;
}
</style>
</head>
<body>
<div style="display:flex">
  <div class="blink-animation pion-blanc"></div>
  <div class="blink-animation pion-noir"></div>
  <div class="blink-animation pion-blanc"></div>
  <div class="blink-animation pion-noir"></div>
  <div class="blink-animation pion-blanc"></div>
  <div class="blink-animation pion-noir"></div>
  <div class="blink-animation pion-blanc"></div>
  <div class="blink-animation pion-noir"></div>
</div>
<script>
const animElements = document.querySelectorAll(".blink-animation");
animElements.forEach((el, ind, arr) => {
  el.addEventListener("click", (e) => {
    arr.forEach((a) => {
      a.classList.remove("clignotement");
    });
    el.classList.add("clignotement");
  });
});
</script>
</body>
</html>