В React, как я могу анимировать исчезновение div и не допустить скачка содержимого под ним в конце анимации?

Question

У меня есть div, который я оживляю с помощью исчезновения. По окончании, я полагаю, он устанавливает display:none, и в этот момент содержимое под ним подпрыгивает, чтобы заполнить пространство. Как я могу сделать это более гладким? Я подумал, что, возможно, в конце анимации я смогу вставить элемент visibility:hidden той же высоты и анимировать уменьшение его высоты. Но это такое обычное дело, я не хочу изобретать велосипед здесь.

Answer 1

display: none полностью удаляет элемент из DOM, и, естественно, остальные элементы просто «подпрыгивают», чтобы занять его место ... Если вы не хотите этого, вы можете просто установить его visibility: hidden илиopacity: 0 ... вместо создания заполнителя div с тем же ...