CSS Transitions - Snippets: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
(Die Seite wurde neu angelegt: „Bootstrap Dropdown mit FadeIn Transition <syntaxhighlight lang="css"> →‎Bootstrap Dropdown Tweak: .dropdown .dropdown-menu{ display: block; opacity…“)
 
(kein Unterschied)

Aktuelle Version vom 29. Mai 2017, 14:19 Uhr

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