向父级添加元素时，我可以使 CSS 平滑过渡吗？答案

【问题标题】：Can I make CSS smoothly transition when adding an element to a parent?向父级添加元素时，我可以使 CSS 平滑过渡吗？
【发布时间】：2022-07-20 23:47:31
【问题描述】：

Per this jsfiddle 我有一个父元素，经过一段时间后，它会添加一个子元素以变得更高。然而，父元素上的 CSS 不会改变 - 父元素只会增长以适应子元素。

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

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

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

是否可以在添加子元素时使用 CSS 过渡来动画父元素的成长，即使父元素的 CSS 实际上并没有改变？

【问题讨论】：

标签： javascript html css css-transitions

【解决方案1】：

是的，这在技术上是可行的，但前提是您为子元素设置动画。

这个小提琴通过使用添加的子元素的字体大小来展示总体思路：example-fiddle

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

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


setTimeout(() => {
    const section = document.querySelector('section')
  var newElement = document.createElement('div');
    newElement.textContent = "new content";     
    newElement.setAttribute("ID",'hidden');
  section.appendChild(newElement)
}, 1 * 1000)

setTimeout(() => {
    var element = document.getElementById('hidden');
  console.log(element);
 element.setAttribute("ID",'');

}, 3 * 1000)

所有其他解决方案（据我所知）都需要您设置和操作父元素的 height 属性以实现 css 转换。

【讨论】：