CSS Transitions - Snippets

Aus Wikizone
Version vom 29. Mai 2017, 14:19 Uhr von 37.49.32.84 (Diskussion) (Die Seite wurde neu angelegt: „Bootstrap Dropdown mit FadeIn Transition <syntaxhighlight lang="css"> →‎Bootstrap Dropdown Tweak: .dropdown .dropdown-menu{ display: block; opacity…“)
(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)
Wechseln zu: Navigation, Suche

Bootstrap Dropdown mit FadeIn Transition

/* Bootstrap Dropdown Tweak */
.dropdown .dropdown-menu{
    display: block;
    opacity: 0;

    -moz-transition:    all 1000ms ease;
    -webkit-transition: all 1000ms ease;
    -o-transition:      all 1000ms ease;
    -ms-transition:     all 1000ms ease;
    transition:         all 1000ms ease;
}
.dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
}

Alternative oder auch Fallback für jQuery (muß noch in eine modernizr Anfrage)

$(function(){
  var $menu = $('.dropdown-menu');

  $('.dropdown-toggle').hover(
    function() {
      $menu.css('opacity',1);
    },
    function() {
      $menu.css('opacity',0);
    });
})();