async/await a zmiany na DOM

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?

Czyli druga animacja odpali (setTimeout()), jak pierwsza się wykona (transition).

rafal95p napisał(a):

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