Hinzufügen eines Folieneffekts zum Bootstrap-Dropdown

Ich verwende Bootstrap und möchte einem Dropdown-Menü eine Animation hinzufügen. Ich möchte eine Animation hinzufügen, beim Verlassen nach unten und wieder nach oben schieben. Wie könnte ich das machen?

Dinge, die ich versucht habe:

Ändern Sie die Js-Dropdown-Datei wie folgt:

Wie kann ich das Navigations-Dropdown-Menü von Bootstrap reibungslos nach oben und unten verschieben?

Wenn Sie auf Bootstrap 3 (BS3) aktualisieren, werden viele Javascript-Ereignisse angezeigt, mit denen Sie die gewünschte Funktionalität verknüpfen können. In BS3 gibt dieser Code allen Dropdown-Menüs den gewünschten Animationseffekt:

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

Sie können über BS3 Ereignisse lesen hier und speziell über die Drop - Down - Ereignisse hier .

Sie können auch die Verwendung von JavaScript für Dropdown-Effekte vermeiden und den CSS3-Übergang verwenden, indem Sie Ihrem Stil diesen kleinen Code hinzufügen:

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

Das einzige Problem auf diese Weise ist, dass Sie die maximale Höhe manuell angeben sollten. Wenn Sie einen sehr großen Wert festlegen, ist Ihre Animation sehr schnell.

Es funktioniert wie ein Zauber, wenn Sie die ungefähre Höhe Ihrer Dropdowns kennen. Andernfalls können Sie weiterhin Javascript verwenden, um einen genauen Wert für die maximale Höhe festzulegen.

Hier ein kleines Beispiel: DEMO

! In dieser Lösung gibt es einen kleinen Fehler beim Auffüllen. Überprüfen Sie den Kommentar von Jacob Stamm mit der Lösung.

Ich mache so etwas, aber beim Schweben statt beim Klicken. Dies ist der Code, den ich verwende. Möglicherweise können Sie ihn ein wenig optimieren, damit er beim Klicken funktioniert

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

Ich weiß nicht, ob ich diesen Thread stoßen kann, aber ich habe eine schnelle Lösung für den visuellen Fehler gefunden, der auftritt, wenn die offene Klasse zu schnell entfernt wird. Grundsätzlich müssen Sie lediglich eine OnComplete-Funktion in das slideUp-Ereignis einfügen und alle aktiven Klassen und Attribute zurücksetzen. Geht so etwas:

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('show');
            $('.dropdown-menu').removeClass('show');
            $('.dropdown').find('.dropdown-toggle').attr('aria-expanded','false');
        });
    });
});

Hier ist meine Lösung für den Slide & Fade-Effekt:

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

Update 2018 Bootstrap 4

In Boostrap 4 wurde die .openKlasse durch ersetzt .show. Ich wollte dies nur mit CSS-Übergängen implementieren, ohne dass zusätzliches JS oder jQuery erforderlich ist ...

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

Demo: https://www.codeply.com/go/3i8LzYVfMF

Hinweis: max-heightKann auf einen beliebigen großen Wert eingestellt werden, der ausreicht, um den Dropdown-Inhalt aufzunehmen.

Beim Klicken kann der folgende Code verwendet werden

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

Ich verwende den obigen Code, habe aber den Verzögerungseffekt durch slideToggle geändert.

Das Dropdown-Menü wird beim Hover mit Animation verschoben.

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

Erweiterte Antwort, war meine erste Antwort, also entschuldigen Sie, wenn es vorher nicht genug Details gab.

Für Bootstrap 3.x bevorzuge ich persönlich CSS-Animationen und habe animate.css & zusammen mit den Bootstrap Dropdown Javascript Hooks verwendet. Obwohl es möglicherweise nicht genau den Effekt hat, den Sie suchen, ist es ein ziemlich flexibler Ansatz.

Schritt 1: Fügen Sie Ihrer Seite animate.css mit den Head-Tags hinzu:

<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-Code für den Trigger:

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

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

Schritt 3: Fügen Sie dann dem Dropdrop-Menüelement 2 benutzerdefinierte Datenattribute hinzu. Daten-Dropdown-In für die In-Animation und Daten-Dropdown-Out für die Out-Animation. Dies können beliebige animate.css-Effekte wie fadeIn oder fadeOut sein

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

Schritt 4: Fügen Sie als Nächstes das folgende Javascript hinzu, um die Datenattribute für Dropdown-In / Out-Daten zu lesen und auf die Hooks / Ereignisse der Bootstrap-Javascript-API ( http://getbootstrap.com/javascript/#dropdowns-events ) zu reagieren :

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 die Animation beschleunigen oder ändern möchten, können Sie dies mit CSS wie folgt tun:

.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 einem Download, wenn jemand interessiert war: Artikel: http://bootbites.com/tutorials/bootstrap-dropdown-effects-animatecss

Ich hoffe, das ist hilfreich und dieser zweite Artikel hat die Detailgenauigkeit, die Tom benötigt

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

Dieser Code funktioniert, wenn Sie Dropdowns beim Hover anzeigen möchten.

Ich habe gerade das .slideTogglezu .slideDown& .slideUpund die entfernt (400)Timing

Hier ist eine schöne einfache Lösung, jQuerydie gut funktioniert:

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

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

Das Umschalten der Folienanimation erfolgt beim Klicken und wird bei Verlust des Fokus immer wieder nach oben verschoben.

Ändern Sie den 300Wert nach Belieben. Je niedriger die Zahl, desto schneller die Animation.

Bearbeiten:

Diese Lösung funktioniert nur für Desktop-Ansichten. Es werden einige weitere Änderungen erforderlich sein, um eine gute Anzeige für Mobilgeräte zu ermöglichen.

BOOTSTRAP 3 REFERENZ

Hinzugefügt, weil ich immer wieder von der Lösung in diesem Thread erwischt werde und sie mich jedes Mal voll macht.

Grundsätzlich entfernt die BS-Dropdown-Liste die .openKlasse sofort vom übergeordneten Element , sodass das Hochrutschen nicht funktioniert.

Verwenden Sie dasselbe Bit wie andere Lösungen für 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');
  });
});

Bei Bootstrap 3 macht diese Variation der obigen Antworten die mobile slideUp()Animation flüssiger. Die obigen Antworten haben eine abgehackte Animation, da Bootstrap die .openKlasse sofort vom übergeordneten Element des Umschalters entfernt , sodass dieser Code die Klasse wiederherstellt, bis die slideUp()Animation beendet ist.

// Add animations to topnav dropdowns
// based on https://stackoverflow.com/a/19339162
// and https://stackoverflow.com/a/52231970

$('.dropdown')
  .on('show.bs.dropdown', function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideDown(300);
  })
  .on('hide.bs.dropdown', function() {
    $(this).find('.dropdown-menu').first().stop(true, false).slideUp(300, function() {
      $(this).parent().removeClass('open');
    });
  })
  .on('hidden.bs.dropdown', function() {
    $(this).addClass('open');
  });

Hauptunterschiede:

• Im hide.bs.dropdownEvent-Handler verwende ich den .stop()Standardwert ( false) für das zweite Argument ( jumpToEnd)
• Der hidden.bs.dropdownEreignishandler stellt die .openKlasse im übergeordneten Element des Dropdown-Umschalters wieder her und tut dies ziemlich unmittelbar nach dem ersten Entfernen der Klasse. In der Zwischenzeit wird die slideUp()Animation noch ausgeführt, und genau wie in den obigen Antworten ist der Rückruf "Die Animation ist abgeschlossen" dafür verantwortlich, dass die .openKlasse endgültig von ihrem übergeordneten Element entfernt wird .
• Die Methoden sind miteinander verkettet, da der Selektor für jeden Ereignishandler identisch ist