klvler klvler - 1 month ago 6
CSS Question

jQuery, CSS: Animating following DOM Elements after display: none

One quick question.
If I set a div to

display: none
, the following Elements in the DOM will jump up on the place where the div was.
How can I animate that jump, that it just moves gently up?

Thnaks in advance for each help!

Answer

You cannot. Instead of display: none; make it with height: 0; and transition: height .5s; overflow: hidden;

Then you will have slightly move of other divs next to others. :)

If you wanna, I can made a simple codepen.