10818 sujets

JavaScript, DOM et API Web HTML5

Bonjour, je débute en Javascript et je cherche à finaliser une animation mise en place avec la bibliothèque animate.css intégrée à mon site et du javascript.

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>
<div class="navbar-name" id="nn"><script>document.write(_userdata.username)</script><i class="fas fa-angle-down"></i></div>
<div class="dropdown-content2 animate__animated animate__fadeInDown animate__faster" id="tags">Texte qui apparaît</div>

.navbar-name {
    margin: auto;
    background: linear-gradient(135deg,#8beaef,#d5bdf8);
    padding: 5px;
    line-height: 10px;
    border-radius: 2px;
  color:#444;
  cursor:pointer;
      margin-left: 30px;
}

.navbar-name i {
    font-size: 10px;
    margin-left: 5px;
}

.dropdown-content2 {
    background-color: #353738;
    color: #fff;
    display: none;
    font-size: 10px;
    margin-top: 55px;
    padding: 10px;
    position: absolute;
    right: 30px;
    border-radius: 0px 0px 2px 2px;
}

Pour l'instant, je suis parvenue à rendre la class .navbar-name cliquable. Celle-ci fait apparaître la div .dropdown-content2 qui apparaît avec l'animation "fadeInDown".

$(function() {
  $("#nn").click(function(){
        $('#tags').toggle();
    });
});

Ce que je cherche - et peine - à faire maintenant, c'est rajouter l'animation inverse si je puis dire sur la div .dropdown-content2, c'est à dire "fadeInUp" lorsque l'on clique à nouveau sur la div .navbar-name. Je ne sais pas trop par où commencer, mais je suppose qu'avec le Javascript on peut arriver au résultat attendu, peut être en ajoutant un toggleClass et l'instruction if... else lorsque la div a été animée avec "fadeInDown"...

Bonne journée et merci d'avance pour votre aide Smiley biggrin
Modifié par holen (18 May 2020 - 09:39)
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)
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).
Modifié par holen (19 May 2020 - 07:30)
Bonjour, désolée mais je n'ai pas compris votre message...
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 Crédit travaux, 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.
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