如何仅使用 CSS3 将动态创建的元素平滑地添加到 DOM？

Question

我的需求很简单，但我找不到合适的解决方案。

我创建元素并将它们作为项目列表添加到 DOM，每个新元素都添加在旧元素之前。我希望“顺利”添加新元素。每个元素的height 是动态的，因此必须是 CSS 规则。

我认为我必须使用 CSS animations 和 keyframes，从我读到的内容我不能使用 transitions，因为有时 it is not rendered by the browser。我不想使用 Javascript，所以我更喜欢避免使用 setTimeout() 或 jQuery 的解决方案。我确信这可以使用现代 CSS 正确完成，但我仍然需要找到正确的方法。

我有一个解决方案的开始（见下文），但在 CSS 中仍然有 max-height: 1000px 硬编码，我想避免这种情况，但我不知道该怎么做，因为将其替换为 auto 或 unset 会破坏动画（请参阅帖子末尾的 GIF）。

你将如何实现一个优雅的过渡来像这样向 DOM 添加新元素（不一定使用我提供的代码）？

---

Try the code on JSFiddle

    function addElement() {
        let dynamicHeight = Math.ceil(Math.random() * 30) + 100;
        let newElem = `<div class='elem' style='height: ${dynamicHeight}px'></div>`;
        let elements = document.getElementById("elements");
        elements.insertAdjacentHTML("afterbegin", newElem);
    }

    let button = document.getElementById("button")
    button.addEventListener("click", addElement);

    .elem {
      background-color: blue;
      margin: 5px;
      animation-duration:0.5s;
      animation-name: slidein;
    }
    
    
    @keyframes slidein {
      from {
        max-height: 0px;
        transform: scale(0);
        opacity: 0;
      }
    
      to {
        max-height: 1000px;
        transform: scale(1);
        opacity: 1;
      }
    }

    <button id="button">Add element</button>
    <div id="elements"></div>

---

使用硬编码的最大高度（看起来不错）：

未设置最大高度（看起来很笨拙）：

Answer 1

由于您定义的是固定高度，因此解决方案是将高度从 0px 设置为固定值。这里的诀窍是依靠 CSS 变量来根据元素的高度生成动态动画：

function addElement() {
  let dynamicHeight = Math.ceil(Math.random() * 100) + 40;
  let newElem = `<div class='elem' style='--h: ${dynamicHeight}px'></div>`;
  let elements = document.getElementById("elements");
  elements.insertAdjacentHTML("afterbegin", newElem);
}

let button = document.getElementById("button")
button.addEventListener("click", addElement);

.elem {
  background-color: blue;
  margin: 5px;
  animation: slidein 0.5s forwards;
}

@keyframes slidein {
  from {
    height: 0px;
    transform: scale(0);
    opacity: 0;
  }
  to {
    height:var(--h); /*This will change for each element */
    transform: scale(1);
    opacity: 1;
  }
}

<button id="button">Add element</button>
<div id="elements"></div>