Logowanie

HTML, CSS, JS - wydarzenie po zakończeniu animacji.

pytanie zadane 19 kwietnia 2019 w HTML i CSS przez Milo Obywatel (1,180 p.)
zmienione kategorie 19 kwietnia 2019 przez Arkadiusz Waluk

Jak napisać jakieś wydarzenie, które wykona się po skończeniu animacji?

@keyframes load {
    0% {
        width: 0vw;
        background-color: rgb(255, 0, 0);
    } 100% {
        width: 96vw;
        background-color: rgb(0, 255, 0);
    }
}

<head onload="check_end_of_animation()">
    <div id="loader"></div>
    <div id="output"></div>
</head>

function check_end_of_animation() {
  while (true) {
    if (document.getElementById("loader").style.widht == "96vw") {
      document.getElementById("output").innerHTML = "LOADED!";
      break;
    }
  }
}

Powyższy kod w JS'ie nie działa. Chodzi mi o to, czy da się napisać kod, który coś wykona, gdy animacja dobiegnie końca?

1 odpowiedź

odpowiedź 19 kwietnia 2019 przez Comandeer Guru (601,110 p.)
wybrane 19 kwietnia 2019 przez Milo

Najlepsza

Tak, jest specjalne zdarzenie na tę okazję – animationend.

Pokaż 7 poprzednich komentarzy

komentarz 21 kwietnia 2019 przez Comandeer Guru (601,110 p.)

A masz w kodzie akapit o klasie .animation?

komentarz 22 kwietnia 2019 przez Tomek Sochacki Ekspert (227,510 p.)

zobacz sobie najlepiej w konsoli co pobierasz takim selektorem, chociaż raczej proponowałbym pobierać referencje po id, ewentualnie klasie. Nie widzę raczej uzasadnienia dla tak silnego wiązania się w JS ze znacznikami html.

komentarz 22 kwietnia 2019 przez Milo Obywatel (1,180 p.)

Tak, mam akapit o klasie .animation. Mam dokładnie to samo co w przykładzie.

komentarz 22 kwietnia 2019 przez Comandeer Guru (601,110 p.)

Wywołujesz to zanim element jest wstawiany na stronę. Przesuń skrypt na koniec body.

komentarz 23 kwietnia 2019 przez Milo Obywatel (1,180 p.)

Tak, teraz wszystko działa. Dzięki

Podobne pytania

0 głosów

0 odpowiedzi 111 wizyt

Linear-gradient na tekście pokazuje się dopiero po zakończeniu animacji w Firefox

pytanie zadane 19 kwietnia 2018 w HTML i CSS przez BT101 Stary wyjadacz (12,540 p.)

0 głosów

1 odpowiedź 136 wizyt

Stop animacji SVG po zakończeniu

pytanie zadane 3 października 2015 w JavaScript przez chris Gaduła (3,680 p.)

+1 głos

1 odpowiedź 260 wizyt

typed.js - wypisywanie tekstu po zakończeniu poprzedniego

pytanie zadane 27 lipca 2020 w JavaScript przez Pauula Początkujący (290 p.)

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...

HTML, CSS, JS - wydarzenie po zakończeniu animacji.

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

1 odpowiedź

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci