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.
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 ?
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 }
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 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.
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
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>
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"
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).
Dernière modification par Invité ; 06/11/2019 à 10h49.
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 : 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'); }); });
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 : 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. }); });
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...
D'autre part, ce serait dommage de "se passer de JavaScript"... dans le forum JavaScript !
Merci à tous.
@amateurprgDans quel intérêt ?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...
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 :
BON :
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part <input class=blue left value=cliquer ici />
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part <input class="blue left" value="cliquer ici" />
En fait, si. Ca s'appelle des balises auto-fermantes (ou balises vides) :...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.
Dernière modification par ProgElecT ; 07/11/2019 à 14h56.
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 !
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager