Chciałbym zrobić tak, że jak kliknę na jakiś przycisk, to wykona się pewna animacja (transition
), a następnie po pewnej zwłoce (setTimeout()
) wykonała się inna. Czy można w tym celu wykorzystać async/await
?
Gdybyś odpowiednio opakował to w promisy to można tak zrobić, ale...
CSS ma już mechanizm opóźnienia animacji
.example {
color: #ff0000;
background: #aaa;
opacity: 1;
transition: color 0.2s ease, opacity 0.4s ease 0.2s;
}
.example:hover {
color: #0000ff;
opacity: 0.5;
}
Po najechaniu myszką na element .example
najpierw zostanie zmieniony kolor na niebieski, a po 200 milisekundach, zostanie zmieniona przezroczystość.
https://developer.mozilla.org/en-US/docs/Web/CSS/transition
JavaScript ma także możliwość wykrycia początku (transitionstart
), oraz końca (transitionend
) transition
przez specjalne eventy.
https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionstart_event
https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionend_event