向父級添加元素時，我可以使 CSS 平滑過渡嗎？

Question

根據這個 jsfiddle ，我有一個父元素，一段時間后，它會添加一個子元素以變得更高。 然而，父元素上的 CSS 不會改變 - 父元素只會增長以適應子元素。

<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)

是否可以在添加子元素時使用 CSS 過渡來動畫父元素的增長，即使父元素的 CSS 實際上沒有改變？

Answer 1

是的，這在技術上是可能的，但前提是您為子元素設置動畫。

這個小提琴通過使用添加的子元素的字體大小來顯示一般想法： 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>

所有其他解決方案（據我所知）都需要您設置和操作父元素的 height 屬性以實現 css 轉換。

Answer 2

您可以通過轉換父元素的高度來做到這一點 - 將其從原始高度增加到原始高度加上新 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>