Can I make CSS smoothly transition when adding an element to a parent?

Question

Per this jsfiddle I have a parent element that, after some time, gets a child element added to become taller. However the CSS on the parent element doesn't change - the parent just grows to fit the child.

<section>
  <div>
    Hello world
  </div>
</section>

section {
  border: 2px red dotted;
  height: 20px;
  transition: all 0.2s ease-in-out;
}

section.isExpanded {
  height: auto;
}

setTimeout(() => {
  const section = document.querySelector('section')
  var newElement = document.createElement('div');
  newElement.textContent = "new content";         
  section.appendChild(newElement)
  section.classList.add("isExpanded")
  
}, 3 * 1000)

Is it possible to use CSS transitions to animate the parent's growth when a child is added , even if the parent element's CSS doesn't actually change?

Answer 1

Yes that would technically be possible, but only if you animate the child-element as it appears.

This fiddle shows the general idea by using the font-size of the added child-element: example-fiddle

 setTimeout(() => { let section = document.querySelector('section') let newElement = document.createElement('div'); newElement.textContent = "new content"; newElement.setAttribute("ID",'hidden'); section.appendChild(newElement) }, 200) setTimeout(() => document.getElementById('hidden').setAttribute("ID",''), 500)

 section { border: 2px red dotted; } div{ font-size:46px; transition:all .5s; } div#hidden{ font-size:0px; }

 <section> <div> Hello world </div> </section>

Every other solution (as far as i know) would require you to set and manipulate the height property of your parent-element to achieve an css-transition.

Answer 2

You can do this by transitioning the height of the parent element - increasing it from the original height to the original height plus the height of the new div.

 const section = document.querySelector('section'); const h1 = section.offsetHeight; let newElement; section.style.height = h1 + 'px'; setTimeout(() => { const newElement = document.createElement('div'); newElement.textContent = "new content"; section.appendChild(newElement); const h2 = newElement.offsetHeight; section.style.height = h1 + 'px'; section.style.overflowY = 'hidden'; requestAnimationFrame(() => { section.style.height = h1 + h2 + 'px'; }); }, 3 * 1000)

 section { border: 2px red dotted; transition: all .2s ease-in-out; }

 <section> <div> Hello world </div> </section>