Según este jsfiddle , tengo un elemento principal que, después de un tiempo, se agrega un elemento secundario para volverse más alto. Sin embargo, el CSS en el elemento principal no cambia: el elemento principal solo crece para adaptarse al elemento secundario.
<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)¿Es posible usar transiciones CSS para animar el crecimiento del padre cuando se agrega un hijo , incluso si el CSS del elemento padre en realidad no cambia?
Sí, eso sería técnicamente posible, pero solo si anima el elemento secundario tal como aparece.
Este violín muestra la idea general usando el tamaño de fuente del elemento secundario agregado: ejemplo-violín
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>Cualquier otra solución (hasta donde yo sé) requeriría que establezca y manipule la propiedad de altura de su elemento principal para lograr una transición CSS.
Puede hacer esto cambiando la altura del elemento principal, aumentándola de la altura original a la altura original más la altura del nuevo 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>