Fonction Keyframes en javascript

**Gérardp76** · 13/09/2024, 11h39

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.index.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**NoSmoking** · 13/09/2024, 18h11

Bonjour,

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
[case1, case2].forEach((el) => {
  el.onanimationend = function() {
    el.style.animationName = "none";
  }
});

Ressources :

**Gérardp76** · 15/09/2024, 10h30

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

**NoSmoking** · 15/09/2024, 11h33

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Fonction Keyframes en javascript

JavaScript

Discussions similaires

Partager

Partager