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

Si vous mettez à jour Bootstrap 3 (BS3), ils ont exposé beaucoup d'événements Javascript qui sont agréables à lier à la fonctionnalité que vous souhaitez. Dans BS3, ce code donnera à tous vos menus déroulants l'effet d'animation que vous recherchez :

  // Add slideDown animation to Bootstrap dropdown when expanding.
  $('.dropdown').on('show.bs.dropdown', function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
  });

  // Add slideUp animation to Bootstrap dropdown when collapsing.
  $('.dropdown').on('hide.bs.dropdown', function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
  });

Vous pouvez lire les événements du BS3 aquí et plus précisément sur les événements de la liste déroulante aquí .

Answer 2

Il est également possible d'éviter l'utilisation de JavaScript pour l'effet de liste déroulante et d'utiliser une transition CSS3, en ajoutant ce petit bout de code à votre style :

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

    max-height: 0;
    display: block;
    overflow: hidden;
    opacity: 0;
}

.dropdown.open .dropdown-menu { /* For Bootstrap 4, use .dropdown.show instead of .dropdown.open */
    max-height: 300px;
    opacity: 1;
}

Le seul problème de cette méthode est que vous devez spécifier manuellement la hauteur maximale. Si vous définissez une valeur très élevée, votre animation sera très rapide.

Cela fonctionne à merveille si vous connaissez la hauteur approximative de vos listes déroulantes, sinon vous pouvez toujours utiliser le javascript pour définir une valeur précise de hauteur maximale.

Voici un petit exemple : DEMO

---

! Il y a un petit bug avec le padding dans cette solution, vérifiez le commentaire de Jacob Stamm avec la solution.

Answer 3

Je fais quelque chose comme ça mais sur le survol au lieu du clic Voici le code que j'utilise, vous pouvez peut-être le modifier un peu pour qu'il fonctionne au clic.

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

Answer 4

Je ne sais pas si je peux remonter ce fil, mais j'ai trouvé une solution rapide au bug visuel qui se produit lorsque la classe ouverte est retirée trop rapidement. En gros, il suffit d'ajouter une fonction OnComplete dans l'événement slideUp et de réinitialiser toutes les classes et attributs actifs. Cela donne quelque chose comme ça :

Voici le résultat : Exemple de Bootply

Javascript/Jquery :

$(function(){
    // ADD SLIDEDOWN ANIMATION TO DROPDOWN //
    $('.dropdown').on('show.bs.dropdown', function(e){
        $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
    });

    // ADD SLIDEUP ANIMATION TO DROPDOWN //
    $('.dropdown').on('hide.bs.dropdown', function(e){
        e.preventDefault();
        $(this).find('.dropdown-menu').first().stop(true, true).slideUp(400, function(){
            //On Complete, we reset all active dropdown classes and attributes
            //This fixes the visual bug associated with the open class being removed too fast
            $('.dropdown').removeClass('show');
            $('.dropdown-menu').removeClass('show');
            $('.dropdown').find('.dropdown-toggle').attr('aria-expanded','false');
        });
    });
});

Answer 5

Voici ma solution pour l'effet de glissement et de fondu :

   // Add slideup & fadein animation to dropdown
   $('.dropdown').on('show.bs.dropdown', function(e){
      var $dropdown = $(this).find('.dropdown-menu');
      var orig_margin_top = parseInt($dropdown.css('margin-top'));
      $dropdown.css({'margin-top': (orig_margin_top + 10) + 'px', opacity: 0}).animate({'margin-top': orig_margin_top + 'px', opacity: 1}, 300, function(){
         $(this).css({'margin-top':''});
      });
   });
   // Add slidedown & fadeout animation to dropdown
   $('.dropdown').on('hide.bs.dropdown', function(e){
      var $dropdown = $(this).find('.dropdown-menu');
      var orig_margin_top = parseInt($dropdown.css('margin-top'));
      $dropdown.css({'margin-top': orig_margin_top + 'px', opacity: 1, display: 'block'}).animate({'margin-top': (orig_margin_top + 10) + 'px', opacity: 0}, 300, function(){
         $(this).css({'margin-top':'', display:''});
      });
   });