• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

VPS Starter Arubacloud
0 głosów
384 wizyt
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ź

+2 głosów
odpowiedź 19 kwietnia 2019 przez Comandeer Guru (599,730 p.)
wybrane 19 kwietnia 2019 przez Milo
 
Najlepsza

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

komentarz 21 kwietnia 2019 przez Comandeer Guru (599,730 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 (599,730 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 smiley

Podobne pytania

0 głosów
0 odpowiedzi 108 wizyt
pytanie zadane 19 kwietnia 2018 w HTML i CSS przez BT101 Stary wyjadacz (12,540 p.)
0 głosów
1 odpowiedź 133 wizyt
pytanie zadane 3 października 2015 w JavaScript przez chris Gaduła (3,680 p.)
+1 głos
1 odpowiedź 243 wizyt
pytanie zadane 27 lipca 2020 w JavaScript przez Pauula Początkujący (290 p.)

92,453 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

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!

...