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

user_123671 0
Viewed 56

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?

css-transitions css html javascript
2 Answers

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.

user_118690430

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>

user_108674540
Related