Ajout d'un effet de glissement pour bootstrap dropdown

il est également possible d'éviter D'utiliser JavaScript pour l'effet de dépose, et d'utiliser la transition CSS3, en ajoutant ce petit morceau 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 {
    max-height: 300px;
    opacity: 1;
}

le seul problème avec cette façon est que vous devriez spécifier manuellement max-height. Si vous définissez une très grande valeur, votre animation sera très rapide.

cela fonctionne comme un charme si vous connaissez la hauteur approximative de vos chutes, sinon vous pouvez toujours utiliser javascript pour définir un valeur max-hauteur précise.

voici un petit exemple: DEMO

! Il ya un petit bug avec rembourrage dans cette solution, vérifier le commentaire de Jacob Stamm avec solution.

je fais quelque chose comme ça mais en vol stationnaire au lieu de cliquer.. C'est le code que j'utilise, vous pourriez être en mesure de le modifier un peu pour qu'il fonctionne sur cliquez sur

$('.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()
});

Je ne sais pas si je peux bousculer ce thread, mais j'ai trouvé une solution rapide pour le bug visuel qui se produit lorsque la classe open est retirée trop rapidement. Fondamentalement, tout ce qu'il y a à cela est d'ajouter une fonction complète à l'intérieur de l'événement slideUp et de réinitialiser toutes les classes actives et les attributs. Va quelque chose comme ceci:

voici le résultat: exemple 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('open');
            $('.dropdown').find('.dropdown-toggle').attr('aria-expanded','false');
        });
    });
});

voici ma solution pour effet slide & fade:

   // 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:''});
      });
   });

sur Cliquez il peut être fait en utilisant le code ci-dessous

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

j'utilise le code ci-dessus mais j'ai changé l'effet delay par slideToggle.

il glisse le dropdown en stationnaire avec animation.

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

réponse élargie, était ma première réponse donc excuse si il n'y avait pas assez de détails avant.

Pour Bootstrap 3.x personnellement, je préfère les animations CSS et j'ai utilisé animate.css & avec les crochets Javascript de Bootstrap Dropdown. Même si ça n'a pas exactement l'effet que vous recherchez, c'est une approche assez souple.

Étape 1: ajouter animé.css à votre page avec la tête tags:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">

Étape 2: utilisez le Bootstrap HTML standard sur le déclencheur:

<div class="dropdown">
  <button type="button" data-toggle="dropdown">Dropdown trigger</button>

  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Étape 3: puis ajouter 2 attributs de données personnalisés à l'élément dropdrop-menu; data-dropdown-in pour l'animation in et data-dropdown-out pour l'animation out. Ceux-ci peuvent être tout animer.effets css tels que fadéine ou fadeOut

<ul class="dropdown-menu" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
......
</ul>

Étape 4: Suivant ajouter le Javascript suivant à lire les attributs data-dropdown-in/out data et réagir aux hooks/événements de L'API Javascript Bootstrap ( http://getbootstrap.com/javascript/#dropdowns-events ):

var dropdownSelectors = $('.dropdown, .dropup');

// Custom function to read dropdown data
// =========================
function dropdownEffectData(target) {
  // @todo - page level global?
  var effectInDefault = null,
      effectOutDefault = null;
  var dropdown = $(target),
      dropdownMenu = $('.dropdown-menu', target);
  var parentUl = dropdown.parents('ul.nav'); 

  // If parent is ul.nav allow global effect settings
  if (parentUl.size() > 0) {
    effectInDefault = parentUl.data('dropdown-in') || null;
    effectOutDefault = parentUl.data('dropdown-out') || null;
  }

  return {
    target:       target,
    dropdown:     dropdown,
    dropdownMenu: dropdownMenu,
    effectIn:     dropdownMenu.data('dropdown-in') || effectInDefault,
    effectOut:    dropdownMenu.data('dropdown-out') || effectOutDefault,  
  };
}

// Custom function to start effect (in or out)
// =========================
function dropdownEffectStart(data, effectToStart) {
  if (effectToStart) {
    data.dropdown.addClass('dropdown-animating');
    data.dropdownMenu.addClass('animated');
    data.dropdownMenu.addClass(effectToStart);    
  }
}

// Custom function to read when animation is over
// =========================
function dropdownEffectEnd(data, callbackFunc) {
  var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
  data.dropdown.one(animationEnd, function() {
    data.dropdown.removeClass('dropdown-animating');
    data.dropdownMenu.removeClass('animated');
    data.dropdownMenu.removeClass(data.effectIn);
    data.dropdownMenu.removeClass(data.effectOut);

    // Custom callback option, used to remove open class in out effect
    if(typeof callbackFunc == 'function'){
      callbackFunc();
    }
  });
}

// Bootstrap API hooks
// =========================
dropdownSelectors.on({
  "show.bs.dropdown": function () {
    // On show, start in effect
    var dropdown = dropdownEffectData(this);
    dropdownEffectStart(dropdown, dropdown.effectIn);
  },
  "shown.bs.dropdown": function () {
    // On shown, remove in effect once complete
    var dropdown = dropdownEffectData(this);
    if (dropdown.effectIn && dropdown.effectOut) {
      dropdownEffectEnd(dropdown, function() {}); 
    }
  },  
  "hide.bs.dropdown":  function(e) {
    // On hide, start out effect
    var dropdown = dropdownEffectData(this);
    if (dropdown.effectOut) {
      e.preventDefault();   
      dropdownEffectStart(dropdown, dropdown.effectOut);   
      dropdownEffectEnd(dropdown, function() {
        dropdown.dropdown.removeClass('open');
      }); 
    }    
  }, 
});

Étape 5 (optionnel): si vous voulez accélérer ou modifier l'animation, vous pouvez le faire avec CSS comme le suivant:

.dropdown-menu.animated {
  /* Speed up animations */
  -webkit-animation-duration: 0.55s;
  animation-duration: 0.55s;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
}

a écrit un article avec plus de détails et un téléchargement si quelqu'un est intéressé: article: http://bootbites.com/tutorials/bootstrap-dropdown-effects-animatecss

j'Espère que c'est utile et ce deuxième rédiger le niveau de détail nécessaire Tom

$('.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 révéler des chutes en vol stationnaire.

je viens de changer le .slideToggle en .slideDown & .slideUp , et j'ai supprimé le (400) timing

BOOTSTRAP 3 RÉFÉRENCE

ajouté parce que je continue à me faire attraper par la solution dans ce fil et il me renverse à chaque fois.

fondamentalement, la réduction BS supprime immédiatement la classe .open du parent, donc glisser vers le haut ne fonctionne pas.

utiliser 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');
  });
});

Voici une bonne solution simple en 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);
})

l'animation de glissement bascule se produit sur le clic et il glisse toujours vers le haut sur perdre la mise au point.

Modifiez la valeur 300 à tout ce que vous voulez, plus le nombre est bas, plus l'animation est rapide.

Edit:

Cette solution ne fonctionnera que pour les vues de bureau. Il aura besoin de quelques d'autres modifications afin d'afficher bien pour le mobile.

Update 2018 Bootstrap 4

dans Boostrap 4, la classe .open a été remplacée par .show . Je voulais mettre en oeuvre ceci en utilisant seulement des transcriptions CSS sans avoir besoin de JS ou jQuery supplémentaires...

.show > .dropdown-menu {
  max-height: 900px;
  visibility: visible;
}

.dropdown-menu {
  display: block;
  max-height: 0;
  visibility: hidden;
  transition: all 0.5s ease-in-out;
  overflow: hidden;
}

Démo: https://www.codeply.com/go/3i8LzYVfMF

Note: max-height peut être réglé à n'importe quelle grande valeur qui est suffisante pour accommoder la baisse contenu.