In React, how can I animate a div fading away and prevent the content below it from jumping at the end of the animation?

Question

I have a div that I animate away using a fade. Upon finishing, I believe it sets display:none at which point, the content below it jumps up to fill the space. How can I make this more smooth? I thought maybe at the end of the animation I could insert a visibility:hidden div of the exact same height, and animate its height shrinking. But this feels like such a common thing to do, I don't want to reinvent the wheel here.

Answer 1

display: none removes the element from the DOM completely and naturally the rest of the elements will just 'jump up' up to take its place... If you don't want this you can simply set it visibility: hidden or opacity: 0... instead of creating a placeholder div with the same...