使用Element.animate()实现下滑动画时不流畅的问题排查

我尝试通过Element.animate()实现下滑动画，代码如下：

errorsMessagesCollapsableContainerMountingPoint.replaceWith(errorsMessagesCollapsableContainer);

errorsMessagesCollapsableContainer.animate(
  [
    { height: 0, overflow: "hidden" },
    { height: "auto", overflow: "visible" }
  ],
  {
    duration: 2000
  }
);

但动画并不流畅：

我在Animation API的使用上是否遗漏了什么？错误列表的HTML结构仅为<ul><li>...</li></ul>。

更新 #

后来了解到动画仅支持数值类型的属性值，于是修改了代码：

// 未挂载时无法获取clientHeight
errorsMessagesCollapsableContainer.style.overflow = "hidden";
errorsMessagesCollapsableContainer.style.visibility = "hidden";
errorsMessagesCollapsableContainer.style.position = "absolute";

errorsMessagesCollapsableContainerMountingPoint.replaceWith(this.#errorsMessagesCollapsableContainer);

const errorsMessagesCollapsableContainerHeight: number = errorsMessagesCollapsableContainer.clientHeight;


errorsMessagesCollapsableContainer.style.visibility = "visible";
errorsMessagesCollapsableContainer.style.position = "static";


this.#errorsMessagesCollapsableContainer.animate(
  [
    { height: 0 },
    { height: errorsMessagesCollapsableContainerHeight }
  ],
  2000
);

但动画仍然不流畅。

请注意，本问题仅关注纯JavaScript Element.animate()解决方案，不考虑CSS动画或第三方方案。

内容的提问来源于stack exchange，提问作者Takeshi Tokugawa YD