显示时的动画元素

Question

我的代码有一个小问题，我必须在 javascript 中显示元素时做小动画，比如在那个函数之后的延迟。

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

有人有什么想法吗？

Answer 1

只需通过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';
    }
};

和 CSS：（这可以是任何动画）

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

如果要在动画结束时运行函数，请使用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);
    }
};