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?