How to smoothly move a block after another block appears above it in CSS?

Question

css

Hello. I have div#1. I add another div#2 above it with js. Is it possible to just css make div#1 smoothly move down after adding div#2? transition doesn't help :/
Thanks.
PS For dev#2 appearance I use animate.css

Answer 1

transition does not react to the "sudden" appearance of the block, you can do this.
div2 defaults to max-height: 0;
When you add a js block, you give it a class, let's say kaboom, and in the kaboom class, you already set max-height: 999999px; and transition to max-height.
OR try transitioning to the parent block of BOTH blocks.