使用 \"Element.animate()\" 方法实现向下滑动动画答案

【问题标题】：Implementing slide down animation with "Element.animate()" method使用 \"Element.animate()\" 方法实现向下滑动动画
【发布时间】：2022-11-12 04:44:39
【问题描述】：

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

errorsMessagesCollapsableContainerMountingPoint.replaceWith(errorsMessagesCollapsableContainer);

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

但它并不顺利：

我在动画 API 使用中遗漏了什么？

错误列表的 HTML 只是 <ul><li>...</li></ul>。

更新

从this post，我知道动画只适用于数字量。我将我的代码替换为：

// The `clientHeight` could not be retrieved without being mounted
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 动画或第三方解决方案。

【问题讨论】：

标签： javascript html css animation

【解决方案1】：

从你的图片来看，你有（持续时间：2000）作为延迟，而不是动画的持续时间。尝试简单地将过渡应用于样式中的此类

【讨论】：

谢谢你的回答。因为这个答案集中在Element.animate()"，而不是纯CSS动画，请您添加Element.animate()"解决方案？