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

Question

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

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

我想，我必须使用CSS animations和keyframes，从我读我不能使用transitions，因为有时它不是由浏览器中呈现。我不想使用Javascript，所以我宁愿避免使用setTimeout()或解决方案jQuery。我确信可以使用现代CSS正确完成此操作，但是我仍然必须找到正确的方法。

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

您将如何实现一个优雅的过渡，以便向DOM这样添加新元素（不必使用我提供的代码）？

---

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