Ajout d'un effet de glissement à la liste déroulante bootstrap

Question

J'utilise bootstrap et j'aimerais ajouter une animation à une liste déroulante. Je veux ajouter une animation à celle-ci, glisser vers le bas et remonter en la quittant. Comment puis-je faire cela ?

Les choses que j'ai essayées :

En changeant le fichier déroulant Js comme ceci :

Comment faire en sorte que le menu déroulant de navigation de Bootstrap glisse en douceur vers le haut et vers le bas ?

Answer 1

$('.navbar .dropdown').hover(function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
}, function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});

Ce code fonctionne si vous voulez faire apparaître les listes déroulantes au survol.

Je viens de changer le .slideToggle a .slideDown & .slideUp et a retiré le (400) timing

Answer 2

Voici une solution simple et agréable utilisant jQuery qui fonctionne bien :

$('.dropdown-toggle').click(function () {
    $(this).next('.dropdown-menu').slideToggle(300);
});

$('.dropdown-toggle').focusout(function () {
    $(this).next('.dropdown-menu').slideUp(300);
})

Le basculement de l'animation de la diapositive se produit lors du clic et la diapositive remonte toujours lors de la perte du focus.

Modifier le 300 à la valeur que vous voulez, plus le nombre est faible, plus l'animation est rapide.

Edita:

Cette solution ne fonctionnera que pour les vues de bureau. Elle nécessitera quelques modifications supplémentaires pour s'afficher correctement sur les téléphones portables.

Answer 3

Je recommande d'utiliser transform au lieu de max-height, c'est plus rapide, et accéléré par le GPU.

Para Bootstrap 5 ajoutez le CSS suivant :

 .dropdown .dropdown-menu {
    -webkit-transition: all 0.32s;
    -moz-transition: all 0.32s;
    -ms-transition: all 0.32s;
    -o-transition: all 0.32s;
    transition: all 0.32s;

    display: block;
    overflow: hidden;
    opacity: 0;
    transform: translateX(-25%) scaleY(0);
    transform-origin: top;
  }

  .dropdown-menu.show {
    opacity: 1;
    transform: translateX(-25%) scaleY(1);
  }

Answer 4

Para Bootstrap 5 Une simple animation keframe permet de réaliser une belle animation de diapositives.

@keyframes slideIn {
    0% {
        transform: translateY(1rem);
        opacity: 0;
    }
    100% {
        transform: translateY(0rem);
        opacity: 1;
    }
}

.slideIn {
    -webkit-animation-name: slideIn;
    animation-name: slideIn;
    animation-duration: 0.4s;
    animation-fill-mode: both;
}

<li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle m-2" href="http://stackoverflow.com/" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu slideIn rounded-2 p-3" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="http://stackoverflow.com/">Action</a></li>
            <li><a class="dropdown-item" href="http://stackoverflow.com/">Another action</a></li>
            <li><hr class="dropdown-divider"/></li>
            <li><a class="dropdown-item" href="http://stackoverflow.com/">Something else here</a></li>
          </ul>
        </li>

Answer 5

RÉFÉRENCE BOOTSTRAP 3

Ajouté parce que je n'arrête pas de me faire piéger par la solution de ce fil de discussion et ça me fout en l'air à chaque fois.

En fait, la liste déroulante BS supprime immédiatement l'option .open de la classe du parent, donc le glissement vers le haut ne fonctionne pas.

Utilisez le même bit que les autres solutions pour slideDown() ;

// ADD SLIDEUP ANIMATION TO DROPDOWN //
$('.dropdown').on('hide.bs.dropdown', function(e){
  e.preventDefault();
  $(this).find('.dropdown-menu').first().stop(true, true).slideUp(300, function(){
    $(this).parent().removeClass('open');
  });
});