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

Version imprimable

05/11/2019, 19h09
domi65

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

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.
05/11/2019, 19h29
amateurprg

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 ?
05/11/2019, 19h38
domi65
Citation:

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:

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

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;
05/11/2019, 20h14
domi65

Citation:

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 !
05/11/2019, 20h39
domi65

Citation:

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.
05/11/2019, 20h48
Invité

Bonjour,

Merci de montrer ton code.

Citation:

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:

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.

OK.

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

Code:

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:

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

Voir : element.classList

05/11/2019, 21h48
amateurprg

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:

<div id=division>

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

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

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:

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

Ou encore :

Code:

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

Code:

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 : :recherch: "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:

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).

06/11/2019, 01h02
amateurprg

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 ?

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:

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

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:

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. }); });

06/11/2019, 13h58
NoSmoking

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> !
06/11/2019, 14h12
Invité

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

D'autre part, ce serait dommage de "se passer de JavaScript"... dans le forum JavaScript ! :mrgreen:
07/11/2019, 02h45
domi65

Merci à tous.

@amateurprg

Citation:

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

Dans quel intérêt ?
07/11/2019, 12h22
amateurprg

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 ;) )
07/11/2019, 13h52
Invité
Bonjour,

Citation:

Envoyé par amateurprg

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

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

L'intérêt des double-quotes est que :
- c'est la convention de syntaxe pour les attributs des éléments (X)HTML
  Citation:
  
  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:

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

BON :

Code:

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

Citation:

...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.
07/11/2019, 16h02
domi65

Citation:

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 ?

Citation:

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 !
07/11/2019, 16h50
Invité

Ça ne fait pas de mal d'être rigoureux, et de suivre les règles.

Et ça évite de venir pleurer sur les forums quand on se retrouve avec un souci qu'on ne comprend pas... alors qu'on a fait "comme d'habitude".

Citation:

"Ce n’est pas parce qu’on peut le faire, qu’on doit le faire."

Jeff Goldblum (dans Jurassic Park !)
07/11/2019, 17h11
amateurprg

Citation:

Comme l'a indiqué jreaux62, les doubles-quotes sont une CONVENTION, pas une obligation.

Et puis, il avait pas dit que ça, mais bon c'est toi qui voit, c'est ton code, je t'ai juste donné mon avis ;)
08/11/2019, 10h48
domi65

Citation:

Envoyé par jreaux62

Ça ne fait pas de mal d'être rigoureux, et de suivre les règles.
Et ça évite de venir pleuré .

Bonjour. Être rigoureux, ça commence par écrire en bon français (venir pleurer) ;-)
D'autre part, les règles sont suivies puisque mes pages passent toujours la certification.

Je rappelle quand-même que ce topic concerne le Javascript !
J'ai l'impression de revivre les débats lorsque des en...eurs de mouches voulaient imposer le XHTML avec de s arguments du même type.

Enfin, grâce à toi, j'ai bien compris pourquoi je DOIS ajouter des doubles quotes à mes email : pour ne plus avoir à pleurer.

Bisous.
08/11/2019, 10h51
domi65

Citation:

Envoyé par amateurprg

je t'ai juste donné mon avis

Tu as bien fait et je t'y ai juste répondu, sans animosité et avec une argumentation technique.
Cordialement.
08/11/2019, 11h26
domi65

Citation:

Envoyé par jreaux62

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

Simple et impeccable ! J'ignorais qu'on puisse faire une transition de ce type (au changement de classe, et non d'état).

Par contre, me vient une autre interrogation : toggle(), pour moi, c'est du jQuery, ça n'existe pas dans la référence des fonction JS de MDN https://developer.mozilla.org/fr/doc...%C3%A9thodes#T

Pourtant, ton code fonctionne sans chargement de jQuery...

Merci tout plein.
08/11/2019, 11h27
Invité

Citation:

Envoyé par domi65

Bonjour. Être rigoureux, ça commence par écrire en bon français (venir pleurer) ;-)

Citation:

Envoyé par domi65

...Serais-tu comment faire avec une transition des fois ? ....

1- :bravo: Commence par balayer devant ta porte... :roll:

2- voir : classList.
08/11/2019, 18h37
domi65

Citation:

Envoyé par domi65

toggle() n'existe pas dans la référence des fonction JS de MDN

Je réponds pour ceux que ça pourrait intéresser.
Toogle() appartient à l'interface DOM.
(Méthode utilisable avec IE 11, soit le dernier qui pouvait être installé sur W 7s si je ne dis pas de bêtise.)

https://developer.mozilla.org/fr/doc...kenList/toggle