Opóźnione pokazywanie się elementów

Mam stronę, na której jest kilka przycisków. Każdy z nich robi 2 rzeczy:
a) wyświetla duży DIV (template)
b) wyświetla kilka DIVów, które są wewnątrz template
Czyli w zależności od przycisku pokazuje się ten sam template, ale różne elementy typu DIV wewnątrz niego.

Na razie zrobiłem tak, że duży DIV pojawia się z animacją (opacity + transition), ale co z DIVami wewnątrz? Chciałem uzyskać efekt typu lazy-loading.

Tak na szybko wymyśliłem coś takiego:

function displayWidgets() {
    setTimeout( () =>
    {
    document.getElementById("A").style.transition="0.6s";
    document.getElementById("A").style.opacity=100;
    document.getElementById("A").style.zIndex = 1;
    document.getElementById("B").style.transition="0.6s";
    document.getElementById("B").style.opacity=100;
    document.getElementById("B").style.zIndex = 1;
    document.getElementById("C").style.transition="0.6s";
    document.getElementById("C").style.opacity=100;
    document.getElementById("C").style.zIndex = 1;
    }, 400);
}

Co o tym sądzicie? Sprawdzi się to w aplikacji typu kiosk?

Masz adres strony jakiś żeby pokazać przykład? (takiej czyjejś na której to już działa)

Co masz na myśli "sprawdzi"? Jak działa to znaczy, że będzie ok. Natomiast dałoby się to przejrzyściej zrobić, te style zapisać do klasy w CSS i potem po prostu dodać klasę do elementów, zamiast tak kopiować to samo po kilka razy.

W kodzie źródłowym strony widać kilkadziesiąt DIV, których widoczność zależny od stylu, który przepina JS. Chodzi mi o to, czy faktycznie to jest ok.

Kilkadziesiąt to mało, żadnego problemu to nie zrobi

Ale poparzcie co ja tu robię:

• zmieniam transition by było opóźnienie na wejściu i brak na wyjściu
• zmieniam z-index by dany DIV "chować" przed kliknięciem
• używam funkcji setTimeout()

Oczywiście można to zrealizować jako definicje różnych klas jak wspomniano wyżej. Pytanie tylko czy tutaj nie za bardzo kombinuję? Bo niby działa.

Kopiuj

function displayWidgets() {
    setTimeout( () =>
    {
    document.getElementById("A").style.transition="0.6s";
    document.getElementById("A").style.opacity=100;
    document.getElementById("A").style.zIndex = 1;
    }, 400);
}

Co o tym sądzicie? Sprawdzi się to w aplikacji typu kiosk?

W bardzo prosty sposób można się pozbyć setTimeout() :)

element.style.transitionDelay = "0.6s";

Od razu lepiej jeżeli chodzi o Event-Loop.