CSS Transition from display none to display block and vice versa

Question

I know this question has probably been asked million times here in SO, but Ive tried most of the solution, I just dont know why it dont work for me.

So I have a drop

Answer 1

it is just simple logic, you currently have styled you slide down but you have not styled the cancellation of the div. You must first have a closed state which i believe in your case is .dropdown-menu

.dropdown-menu {
    transition: all 500ms ease;
}

or just use

.dropdown-menu {
    transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
}

If this does not work,