Why doesn't this div fade out slowly?

Question

I have created a fiddle .

The modal fades in but not out, I've noticed if I add another css class

.out { opacity: 0 !important; }

and add that (rather than remove .in) it works. Why is this?

Answer 1

You need to add a default height attribute to the .fade class. Currently, when the .in class gets removed, the modal immediately loses it's height before the fade out animation