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

Takeshi Tokugawa YD 0
Viewed 28

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:

enter image description here

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.

animation javascript css html
1 Answers

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

userGV8m10
Related