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

Question

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

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

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

我有一个解决方案的开始(见下文)，但是仍然有 max-height: 1000px 硬编码在 CSS 中，我想避免这种情况，但我不知道该怎么做，因为将其替换为 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>