11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] FINI

Coucou holen,
j'ai un peu oublié le jquery donc je te le mets en javascript mais tu devrais comprendre l'idée

const nn = document.querySelector("#nn");
nn.addEventListener('click', function(){
if(this.classList.contains('active') {
   // ton animation retour
   this.classList.remove('active');
} else {
   // ton animation aller 
   this.classList.add('active');
}
});

Modifié par vzytoi (18 May 2020 - 21:37)
holen a écrit :
Bonjour, merci mais malheureusement je n'arrive pas à faire fonctionner le script que vous m'avez donné... Mes connaissances sont vraiment minimes en JS et j'avoue être un peu perdue en la circonstance ^.^ Surtout que, comme dit précédemment, il y a cette bibliothèque (animate.css) que j'ai intégrée à mon site et je ne sais la faire fonctionner qu'en rajoutant directement dans le html le sélecteur (en l'occurence il s'agit de ceux-ci : "animate__animated animate__fadeInDown animate__faster - c'est grâce à ça que j'arrive à donner l'animation souhaitée à ma div).

Mais il y a aussi des vidéos sur Youtube qui vous montrent étape par étape le processus à suivre.
Modifié par _laurent (28 May 2020 - 10:54)
Bonjour, honnêtement je n'ai pas réussi à mettre la main sur un tuto qui parvienne au résultat que j'attends... Smiley ohwell
Modérateur
Salut,

Ce qui pose soucis c'est de jouer avec le display. Quand tu le fait apparaître ça va l'animation se lance mais au moment ou tu le fait disparaître le display none s’exécute de suite et n'attend pas l'animation.

Tiens voila un exemple avec le opacity plutôt :
https://jsfiddle.net/undless/y6f2d7qh/

Le seul soucis c'est que ton élément reste présent, il est juste invisible. Il faudrait le coupler avec un display:none; qui se lance après l'animation ça doit pouvoir se faire en js avec ce qui est écrit là : https://animate.style/#javascript
Bonjour, merci pour votre réponse.

J'ai essayé avec le opacity mais effectivement l'élément restant présent, cela ne permet pas son utilisation optimale.

Comme dit plus haut, le JS et moi, c'est compliqué. J'ai lu le lien que vous m'avez donné (animate.style) mais je n'ai aucune idée de comment faire en sorte de faire en sorte que le display:none se lance après l'animation Smiley ohwell
Modifié par holen (29 May 2020 - 08:33)
Sujet clos
Aller à