Bootstrap 3 discesa transizione

Question

Innanzitutto ecco il fiddle

Solo una discesa bootstrap normale, ho fatto alcune modifiche al css modo da far apparire il menu a discesa al passaggio del mouse (invece di click), ma come mi voglio una semplice animazione dissolvenza . Ho provato la transizione css ma non ha funzionato perché l'elemento del menu .dropdown ha un 'display: none' applicato, al passaggio del mouse passa a 'display: block'. Come faccio ad animare un elemento che cambia da "diplay: none" a "display: block" o esiste un altro metodo per ottenere questo?

Ho già cercato su Google e ho trovato una risposta, ma non hanno aiutato.

codice HTML:

<div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 
    Dropdown 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
    <li role="presentation" class="divider"></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> 
    </ul> 
</div> 

codice CSS:

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

Answer 1

è possibile ignorare lo stile di default del display: none con display: block, dal momento che si sta utilizzando anche l'opacità: 0 per nascondere il menu. Dai una prova al seguente CSS e vedi se ciò è ciò che ti serve. Ho aggiornato la velocità di transizione per rendere l'effetto più evidente.

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

versione aggiornata del violino: http://jsfiddle.net/pjej7o2m/1/

Ecco uno script jQuery che potrebbe funzionare come alternativa a libra sopra il div (ancora utilizzando le proprietà CSS di transizione per l'opacità)

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

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

violino aggiornato: http://jsfiddle.net/pjej7o2m/2/

Answer 2

.dropdown .dropdown-menu { 
    display: block; 
    visibility: hidden; 
    opacity: 0; 
    transition:   all 0.2s ease; 
    -moz-transition: all 0.2s ease; 
    -webkit-transition: all 0.2s ease; 
    -o-transition:  all 0.2s ease; 
    -ms-transition:  all 0.2s ease; 
} 
.dropdown:hover .dropdown-menu { 
    visibility: visible; 
    opacity: 1; 
} 
.dropdown { 
    display: inline-block; 
} 

Basta aggiungere display:block e visibility:hidden; a .dropdown .dropdown-menu {. Quindi aggiungere visibility: visible a .dropdown:hover .dropdown-menu { e il gioco è fatto.

È necessario modificare la visibilità poiché l'opacità del menu a discesa è 0 ma è ancora lì. Puoi verificarlo passando il mouse sul tuo pulsante. Modificando la visibilità, il menu a tendina sarà disponibile solo quando il tuo pulsante sarà al passaggio del mouse.