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>