Démarrer une transition ou une animation CSS lors d'un événement JS

**domi65** · 05/11/2019, 19h09

Bonjour.
Question toute bête mais à laquelle je ne trouve pas de réponse sur le web :
Comment faire démarrer une transition ou une animation CSS par un événement JS, par exemple au clic sur un bouton.
Merci.

**amateurprg** · 05/11/2019, 19h29

Salut

Par un click, alors ça veut dire que c'est du js qui va lancer l'anim css, y a que ça.
Style une boucle d'animation et tu change à l'intérieur de la boucle le css d'un élément à animer .

Ou alors j'ai pas compris ton probleme ?

**domi65** · 05/11/2019, 19h38

Envoyé par amateurprg

Ou alors j'ai pas compris ton probleme ?

J'ai du mal m'exprimer.

Je veux un truc dans le genre <button onclick="demarrerAnim()">Démarrer l'animation</button> et

Code :

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

1
2
3
function demarrerAnim() {
  // quelque chose, mais quoi, qui démarre la transition ou l'animation déclarée dans le CSS 
}

**amateurprg** · 05/11/2019, 20h09

Tu dois mettre en pause ton animation.

animation-play-state: paused;

Puis la lancer avec :

animation-play-state: running;

Tu peux en démarrer/pauser plusieurs :

animation-play-state: paused, running, running;

**domi65** · 05/11/2019, 20h14

Envoyé par amateurprg

Puis la lancer avec : animation-play-state: running;

Ok, une instruction du genre :

monElt.style.animationPlayState = 'running' ?

Merci, super, j'm'en vas essayer ça !

**domi65** · 05/11/2019, 20h39

Envoyé par amateurprg

Tu dois mettre en pause ton animation.

Ta façon de faire fonctionne bien pour une animation.
Serais-tu comment faire avec une transition des fois ? (Ouaip, je sais, je suis exigeant).
Merci.

Invité · 05/11/2019, 20h48

Bonjour,

Merci de montrer ton code.

**domi65** · 05/11/2019, 21h09

Envoyé par jreaux62

Merci de montrer ton code

Je n'ai pas de code, c'est une question générale.
Je peux cependant rédiger un exemple

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
<!DOCTYPE HTML>
<head>
<meta charset="UTF-8">
<style>
#division {
    max-height: 0px;
    transition: all 1s;
    overflow: hidden;
}
#division:hover {
    max-height: 200px;
}
</style>
</head>
<body>
<input type=button onclick="aider()" value="Aide">
<div id=division>
    Texte qui s'allonge<br>
    Texte qui s'allonge<br>
    Texte qui s'allonge<br>
    Texte qui s'allonge<br>
</div>
 
<script>
    // mon div étant caché, il me faut le dérouler d'une autre façon qu'au survol
    function aider() {
        // je fais comme si l'on passait la souris sur la div
    }
</script>

Merci.

Invité · 05/11/2019, 21h29

OK.

Dans le cas présent, une solution simple est d'ajouter/supprimer une classe CSS :

Code css :

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

1
2
3
4
5
6
7
8
9
#division {
  max-height: 0;
  transition: all 0.5s;
  overflow: hidden;
}
#division.over {
  max-height: 100px;
  overflow: auto;
}

Code JavaScript :

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

1
2
3
4
"use strict";
function aider() {
  document.querySelector('#division').classList.toggle('over');
}

Voir : element.classList

**amateurprg** · 05/11/2019, 21h48

N'oublie pas quand tu fera ton code original de mettre des guillemets aux noms des id des elements.
Ne fait pas comme là, par exemple :

Code :

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

<div id=division>

Invité · 05/11/2019, 21h48

Tant a qu'à (bien) faire, si on veut pouvoir appliquer l'animation sur plusieurs éléments :

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
  <div>
    <input type="button" onclick="aider(this)" value="Aide 1" />
    <div class="aide">
      Texte 1 qui s'allonge<br>
      Texte qui s'allonge<br>
      Texte qui s'allonge<br>
      Texte qui s'allonge<br>
      Texte qui s'allonge<br>
      Texte qui s'allonge<br>
      Texte qui s'allonge<br>
      Texte qui s'allonge<br>
      Texte qui s'allonge<br>
      Texte qui s'allonge<br>
      Texte qui s'allonge<br>
      Texte qui s'allonge<br>
      Texte qui s'allonge<br>
      Texte qui s'allonge<br>
    </div>  
  </div>
 
  <div>
    <input type="button" onclick="aider(this)" value="Aide 2" />
    <div class="aide">
      Texte 2 qui s'allonge<br>
      Texte qui s'allonge<br>
      Texte qui s'allonge<br>
      Texte qui s'allonge<br>
      Texte qui s'allonge<br>
      Texte qui s'allonge<br>
      Texte qui s'allonge<br>
      Texte qui s'allonge<br>
      Texte qui s'allonge<br>
      Texte qui s'allonge<br>
      Texte qui s'allonge<br>
      Texte qui s'allonge<br>
      Texte qui s'allonge<br>
      Texte qui s'allonge<br>
    </div>  
  </div>

Code css :

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

1
2
3
4
5
6
7
8
9
10
.aide {
  max-height: 0;
  transition: all 0.5s;
  overflow: hidden;
}
.aide.over {
  max-height: 100px;
  overflow: auto;
  border:1px dashed #ccc;
}

Code JavaScript :

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

1
2
3
4
5
"use strict";
function aider(elt) {
  console.log( elt.nextElementSibling );
  elt.nextElementSibling.classList.toggle('over');
}

Ou encore :

Code html :

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

1
2
3
4
    <input type="button" class="btnAide" value="Aide 1" />
...
    <input type="button" class="btnAide" value="Aide 2" />
...

Code JavaScript :

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

1
2
3
4
5
6
7
"use strict";
const btnAides = document.querySelectorAll('.btnAide');
btnAides.forEach( function(btnAide){
  btnAide.addEventListener('click', function(){
    this.nextElementSibling.classList.toggle('over');
  });
});

Cela dit, tu peux aussi faire une recherche :

"tooltip CSS"

Des infobulles en CSS3

Pour afficher l'infobulle sur le "click" et plus sur le :hover, il suffit de :
1- remplacer dans le script CSS :hover par .over
2- Ajouter le script JS :

Code JavaScript :

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

1
2
3
4
5
6
7
8
"use strict";
const tooltips = document.querySelectorAll('.tooltip');
tooltips.forEach( function(tooltip){
  tooltip.addEventListener('click', function(event){
    event.preventDefault(); // empêche l'évènement par défaut (ici, lien <a> : href désactivé)
    this.classList.toggle('over'); // ajoute ou supprime la class "over"
  });
});

Voir la démo (au clic).

**amateurprg** · 06/11/2019, 01h02

Salut

Chui allé sur la démo, et quand je click sur un des liens à cliquer, l'infobulle apparait mais ça fait remonter la page de la hauteur de l'infobulle, donc je crois qu'il faut mettre l'infobulle en "absolute" non ?

**NoSmoking** · 06/11/2019, 10h20

Bonjour,
il faut annuler l'action par défaut qui est réalisée au click sur un lien à savoir suivre le lien donc dans le cas présent remonter en haut de page.

Cela se fait en utilisant la méthode Event..preventDefault().

Code :

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

1
2
3
4
5
6
7
8
const tooltips = document.querySelectorAll('.tooltip');
tooltips.forEach(function(tooltip) {
  tooltip.addEventListener('click', function(ev) {  // récupération en paramètre de l'événement
    // annule action par défaut
    ev.preventDefault();
    this.classList.toggle('over');
  });
});

[EDIT]
Je rajoutes cette page, que je n'ai jamais pris le temps de finir, comme d'hab : Animation CSS simple

Invité · 06/11/2019, 12h06

Ah oui, je n'avais pas vu que c'était des liens <a>.

Du coup, je les ai remplacés par de simples <span>, et ça fonctionne aussi bien : https://codepen.io/jreaux62/pen/MWWVvOj
le event.preventDefault(); n'est plus nécessaire

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
"use strict";
const tooltips = document.querySelectorAll('.tooltip');
tooltips.forEach( function(tooltip){
  tooltip.addEventListener('click', function(){
    this.classList.toggle('over');
  });
  tooltip.addEventListener('mouseout', function(){
    let ceci = this;
    window.setTimeout( function(){
      ceci.classList.remove('over');
    } , 1000); // on masque après 1 sec.
  });
});

**NoSmoking** · 06/11/2019, 13h58

Tu aurais également pu te passer de JavaScript en utilisant le sélecteur .tooltip:focus span, sur tes <a> avec l'avantage que la bulle ne reste pas coincée mais avec le désagrément de la remontée dans bien des cas.

On voit que pour ce cas <nobody> is perfect </nobody> !

Invité · 06/11/2019, 14h12

Oui, mais dans le script JS, je peux remplacer 'click' par 'dblclick' si je veux !
Et là, le CSS est KO...

D'autre part, ce serait dommage de "se passer de JavaScript"... dans le forum JavaScript !

**domi65** · 07/11/2019, 02h45

Merci à tous.

@amateurprg

N'oublie pas quand tu fera ton code original de mettre des guillemets aux noms des id

Dans quel intérêt ?

**amateurprg** · 07/11/2019, 12h22

Comment ça ? Y a pas d'intérêt ?

Moi j'ai toujours fait comme ça, c'est ce que j'ai appris sur le net depuis toujours :/
Pour moi c'est comme si tu me disais pourquoi fermer une balise (oui bon y a des balises qui ferment pas

)

Invité · 07/11/2019, 13h52

Bonjour,

Envoyé par amateurprg

Moi j'ai toujours fait comme ça...

Ce n'est pas une réponse très convaincante...

L'intérêt des double-quotes est que :

c'est la convention de syntaxe pour les attributs des éléments (X)HTML
Les balises HTML respectent une syntaxe simple et stricte :
- Un chevron ouvrant (<)
- Le nom de la balise
- Des attributs (optionnels). Un espace, suivi du nom de l'attribut, d'un signe égal (=) et d'une valeur entre doubles quotes ("").
- Un chevron fermant (>)
sans double-quotes, plusieurs valeurs séparées par des espaces ne seraient pas correctement lues *

* MAUVAIS :

Code HTML :

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

<input class=blue left value=cliquer ici />

BON :

Code HTML :

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

<input class="blue left" value="cliquer ici" />

...oui bon y a des balises qui ferment pas...

En fait, si. Ca s'appelle des balises auto-fermantes (ou balises vides) :

<br />
<hr />
<img ... />
<input ... />
...

Le "/" final n'est pas obligatoire en HTML, mais il l'est en XHTML.

**domi65** · 07/11/2019, 16h02

Envoyé par amateurprg

Comment ça ? Y a pas d'intérêt ?

Bonjour.
Il peut y avoir, si l'attribut est composé de caractères dits spéciaux, comme l'espace.

Dans le cas que tu as commenté, <div id=division> est parfaitement correct. Aucun navigateur ni le validateur du W3C ne tique.
J'ajoute que les quotes simples sont aussi tout à fait admises pour des attributs composés du genre <div class='c1 c2'>
Comme l'a indiqué jreaux62, les doubles-quotes sont une CONVENTION, pas une obligation.

D'où ma question : pourquoi m'obliger à charger systématiquement le code de quotes si leur absence ne provoque aucun problème, même pas de validation, que je développe en solo et que de plus mon éditeur de code me permet de visualiser plus facilement les attributs hors quotes ?

Envoyé par jreaux62

Le "/" final n'est pas obligatoire en HTML, mais il l'est en XHTML.

Feu le XHTML ;-)
(un truc qui permettait aux pinailleurs de se sentir exister !)

Tapez pas !