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

Question

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

我创建元素并将它们作为项目列表添加到 DOM 中，每个新元素都添加在旧元素之前。我希望新元素能够“顺利”添加。每个元素的

height

都是动态的，所以必须是 CSS 规则。

我想我必须使用CSS

animations

和

keyframes

，从我读到的内容来看我不能使用

transitions

，因为有时它不是由浏览器渲染的。我不想使用 Javascript，所以我更喜欢避免使用

setTimeout()

或

jQuery

解决方案。我确信使用现代 CSS 可以正确完成此操作，但我仍然必须找到正确的方法。

我有一个解决方案的开始（见下文），但是CSS中仍然有

max-height: 1000px

硬编码，我想避免这种情况，但我不知道如何，因为将其替换为

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>

Answer 2

尚未完全支持，但 View Traansitions API 是您所需要的。