Implementing slide down animation with "Element.animate()" method

Question

I tried to implement the slide down animation by Element.animate() :

errorsMessagesCollapsableContainerMountingPoint.replaceWith(errorsMessagesCollapsableContainer);

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

but it is not smooth:

Something that I missing in Animation API usage?

The HTML of errors list is just <ul><li>...</li></ul> .

Update

From this post , I knew that animation works only numeric amounts. I replaces my code with:

// 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
);

but animation still not smooth.

Please not that this question is focused on pure JavaScript Element.animate() solution, not CSS animation or third-party solutions.

Answer 1

Try the following:

errorsMessagesCollapsableContainerMountingPoint.replaceWith(errorsMessagesCollapsableContainer);

errorsMessagesCollapsableContainer.animate(
  [
    { height: 0, overflow: "hidden", transition: "height 0.2s ease-in-out" },
    { height: "auto", overflow: "visible" },
  ],
  {
    duration: 2000
  }
);

Let me know if this solved your problem.

Answer 2

Judging from your picture you have ( duration: 2000 ) works as a delay, not the duration of the animation. Try simply applying transition to this class in the styles