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.
Version imprimable
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.
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 ?
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;
Bonjour,
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
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"
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).
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().
[EDIT]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'); }); });
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. }); });
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> !
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:
Merci à tous.
@amateurprgDans quel intérêt ?Citation:
N'oublie pas quand tu fera ton code original de mettre des guillemets aux noms des id
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 ;) )
Bonjour,
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 :
BON :Code:<input class=blue left value=cliquer ici />
Code:<input class="blue left" value="cliquer ici" />
En fait, si. Ca s'appelle des balises auto-fermantes (ou balises vides) :Citation:
...oui bon y a des balises qui ferment pas...
- <br />
- <hr />
- <img ... />
- <input ... />
- ...
Le "/" final n'est pas obligatoire en HTML, mais il l'est en XHTML.
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 ?
Feu le XHTML ;-)
(un truc qui permettait aux pinailleurs de se sentir exister !)
Tapez pas !