Hinzufügen eines Folieneffekts zum Bootstrap-Dropdown

Ebenfalls ist es möglich, zu vermeiden Sie die Verwendung von JavaScript für drop-down-Wirkung und nutzen CSS3 übergang, indem Sie dieses kleine Stück code, um Ihren Stil:

.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;
}

Das einzige problem mit dieser Art ist, dass Sie sollten geben Sie manuell die max-Höhe. Wenn Sie einen sehr großen Wert, dass Ihre animation sehr schnell.

Es funktioniert wie ein Charme, wenn Sie wissen, die Ungefähre Höhe des dropdowns, da Sie sonst noch können javascript verwenden, um ein genaues max-height Wert.

Hier kleines Beispiel: DEMO

! Es gibt kleine bug mit Polsterung in dieser Lösung zu überprüfen, Jakob Stamm Kommentar mit der Lösung.

InformationsquelleAutor der Antwort MadisonTrash

Ich weiß nicht, ob ich kann bump diesem thread, aber ich habe herausgefunden, ein quick-fix für den visual bug, das passiert, wenn die offene Klasse entfernt zu schnell. Im Grunde, alles, was es ist, es ist ein OnComplete-Funktion in der slideUp-Ereignis und das zurücksetzen aller aktiven Klassen und Attribute. Geht so etwas wie dieses:

Hier ist das Ergebnis: Bootply Beispiel

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

InformationsquelleAutor der Antwort IndieRok

Ich bin mit dem code oben habe ich aber geändert, ist der delay-Effekt von slideToggle.

Es Folien die Dropdownliste auf schweben mit 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)
    });

InformationsquelleAutor der Antwort Augusto Triste

Erweiterte Antwort, war meine erste Antwort also Entschuldigung, wenn es nicht detailliert genug vor.

Für Bootstrap-3.x ich persönlich bevorzuge CSS-Animationen und ich habe mit animieren.css & zusammen mit dem Bootstrap-Dropdown Javascript Haken. Auch wenn es vielleicht nicht genau der Effekt, den Sie suchen, es ist ein ziemlich flexibles Konzept.

Schritt 1: Hinzufügen animieren.css Ihrer Seite mit dem Kopf tags:

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

Schritt 2: Verwenden Sie den standard-Bootstrap-HTML auf den Auslöser:

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

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

Schritt 3: Dann fügen Sie 2 benutzerdefinierte Daten-Attribute, um die dropdrop-Menü-element; Daten-dropdown-in für die Animations-und Daten-dropdown-out für die out-animation. Diese kann jeder animieren.css-Effekte wie fadeIn oder fadeOut

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

Schritt 4: als Nächstes fügen Sie den folgenden Javascript-Code zu Lesen, das Daten-dropdown-in/out-data-Attribute auf Sie zu reagieren und die Bootstrap-Javascript-API-hooks/events (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');
      }); 
    }    
  }, 
});

Schritt 5 (optional): Wenn Sie beschleunigen möchten, oder ändern Sie die animation, die Sie tun können, so mit CSS wie folgt:

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

Schrieb einen Artikel mit mehr Details und ein download wenn irgend jemand interessiert:
Artikel: http://bootbites.com/tutorials/bootstrap-dropdown-effects-animatecss

Hoffe, das ist hilfreich & das zweite schreiben ist die Detailtiefe, die erforderlich
Tom

InformationsquelleAutor der Antwort Tom James

Hier ist eine schöne einfache Lösung mit jQuery das funktioniert gut:

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

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

Die slide animation Umschalten erfolgt über einen Klick und es immer rutscht wieder bis auf den Fokus verlieren.

Alter der 300 Wert auf alles, was Sie wollen, je niedriger die Zahl, desto schneller die animation.

Edit:

Diese Lösung funktioniert nur für desktop-Ansichten. Es müssen einige weitere änderungen, um gut für das Handy.

InformationsquelleAutor der Antwort Barry Michael Doyle