È possibile ottenere i menu a tendina Bootstrap di Twitter per la dissolvenza in apertura?

Question

Sto cercando di ottenere il menu a discesa standard della barra di navigazione su Twitter Bootstrap per dissolvenza in apertura anziché solo apparire. Ho provato ad aggiungere le classi fade e in ma non sembra svanire. Ecco il mio violino http://jsfiddle.net/byronyasgur/5zr4r/10/.

Ho provato a farlo in un altro modo, ad esempio la risposta su this question ma ho qualche problema nel mirare al trigger a discesa con jquery.

Answer 1

Giocando con questo, sembra che le animazioni CSS funzionino al meglio.

.open > .dropdown-menu { 
    animation-name: slidenavAnimation; 
    animation-duration:.2s; 
    animation-iteration-count: 1; 
    animation-timing-function: ease; 
    animation-fill-mode: forwards; 

    -webkit-animation-name: slidenavAnimation; 
    -webkit-animation-duration:.2s; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-timing-function: ease; 
    -webkit-animation-fill-mode: forwards; 

    -moz-animation-name: slidenavAnimation; 
    -moz-animation-duration:.2s; 
    -moz-animation-iteration-count: 1; 
    -moz-animation-timing-function: ease; 
    -moz-animation-fill-mode: forwards; 
} 
@keyframes slidenavAnimation { 
    from { 
    opacity: 0; 
    } 
    to { 
    opacity: 1; 
    } 
} 
@-webkit-keyframes slidenavAnimation { 
    from { 
    opacity: 0; 
    } 
    to { 
    opacity: 1; 
    } 
} 

È possibile aggiungere altre proprietà CSS per rendere più complesse le animazioni. Per esempio, ho giocato con la sinistra: -30 -> sinistro: 0.

Answer 2

Forse fare qualcosa di simile con jQuery:

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

È possibile chek il violino qui: http://jsfiddle.net/5zr4r/15/

UPDATE: Ho dimenticato di dire che si dovrebbe rimuovere il fadein dal ul.

Answer 3

si può provare questo:

// Add fadeToggle animation to dropdown  
$('.dropdown').on('show.bs.dropdown', function(e) { 
    $(this).find('.dropdown-menu').first().stop(true, true).fadeToggle(500); 
}); 

// Add fadeToggle animation to dropdown 
$('.dropdown').on('hide.bs.dropdown', function(e) { 
    $(this).find('.dropdown-menu').first().stop(true, true).fadeToggle(500); 
}); 

Utilizza esistenti show.bs.dropdown e hide.bs.dropdown funzioni di Bootstrap e cambia l'effetto discesa per " dissolvenza "in invece di" apparire ". È anche possibile modificare fadeToggle() a slideDown() se si desidera applicare una "diapositiva". Spero che questo ti aiuti.

Ecco il violino: http://jsfiddle.net/ck5c8/

Answer 4

ho trovato troppo bella soluzione:

// 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){ 
    $(this).find('.dropdown-menu').first().stop(true, true).slideUp(); 
}); 

Esempio: http://codepen.io/danielyewright/pen/EvckL

Answer 5

mi piacerebbe presentare una CSS-unico approccio moderno,:

.dropdown-menu.fade { 
    display: block; 
    opacity: 0; 
    pointer-events: none; 
} 
.open > .dropdown-menu.fade { 
    pointer-events: auto; 
    opacity: 1; 
} 

Ciò consente a .fade di gestire il tra animazione nsition, ma .open è ciò che controlla l'opacità e lo stato del puntatore.

Answer 6

piccolo tweak per Jason Featheringham answer che opera nel Bootstrap 4.

.dropdown-menu.fade { 
    display: block; 
    opacity: 0; 
    pointer-events: none; 
} 

.show > .dropdown-menu.fade { 
    pointer-events: auto; 
    opacity: 1; 
}