Transtion dla dropdown menu (lub inne efekty) Boostrap 4

Question

Próbowaliście upiększyć zachowanie domyślnego navbar w Bootstrap ?

Np żeby po wyświetleniu się dropdown'a zachodził transition z opacity 0 do 1 dla tego menu.

Np. próbowałem czegoś takiego:

$(document).ready(function(){
$('.dropdown').click(function(){
    $('.dropdown-menu').css('opacity','1');
    $('.dropdown-item').css('opacity','1');
});
});

Nawet działa - jeśli dam opacity np. na 0.5 to takie będzie po kliknięciu na dropdown dla rozwijajacego się menu, ale nie zachodzi efekt transition. Oczywiście mam ustawione w css transition 1s dla .dropdown-menu i .dropdown-item

 

Answer 1

Dla potomnych, może się komuś przyda:

.dropdown > .dropdown-menu{
    transition:1s;
    display:block;
    opacity:0;
    z-index:-1000;
}

.dropdown:hover > .dropdown-menu {
    z-index:1000;
    opacity:1;
    display:block;
}