Mam mały problem z kodem Muszę zrobić małą animację podczas wyświetlania elementu w JavaScript coś takiego jak opóźnienie po tej funkcji.

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

Ktoś ma jakiś pomysł?

1
Furman 21 listopad 2020, 20:14

1 odpowiedź

Najlepsza odpowiedź

Wystarczy ustaw animację elementu przez 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';
    }
};

I CSS: (może to być dowolna animacja)

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

Jeśli chcesz uruchomić funkcję, gdy kończy się animacja, użyj 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);
    }
};
0
barhatsor 21 listopad 2020, 17:21