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?
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.
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>