Animation element when displaying

Question

I have small problem with code i have to do small animation when displaying element in javascript something like a delay After that function.

function OpenPanelEdit() {
    const element = document.getElementsByClassName("menu-on-center-edit");
    for(const i=0; i < element.length; i++) {
        element[i].style.display = 'flex';
    }
};

Somebody have any idea ?

Answer 1

Just set the element's animation via el.style.animation .

function OpenPanelEdit() {
    const element = document.getElementsByClassName("menu-on-center-edit");
    for(const i=0; i < element.length; i++) {
        element[i].style.display = 'flex';
        element[i].style.animation = 'someAnimation 1s';
    }
};

And the CSS: (This can be any animation)

@keyframes someAnimation {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
}

If you want to run a function when the animation ends, use setTimeout :

function OpenPanelEdit() {
    const element = document.getElementsByClassName("menu-on-center-edit");
    for(const i=0; i < element.length; i++) {
        element[i].style.display = 'flex';
        element[i].style.animation = 'someAnimation 1s';
        window.setTimeout(() => {
          runSomeFunction();
        }, 1000);
    }
};