I just published a JavaScript library called transitions-all-settled that allows you to wait for CSS transitions to settle before you do something.
The package exports a single function that accepts an HTML node and returns a promise. The promise resolves when all CSS transitions on the HTML node and its children have settled.
import { transitionsAllSettled } from "transitions-all-settled";
await transitionsAllSettled(node);
The term “settled” means that if a node received a transitionstart event, it
also received a transitionend or transitioncancel event.
This is useful for exit animations to wait for all CSS transitions to settle before removing the node from the DOM.
Here is a demo. Click any square.
Here’s the code that makes that happen. Here’s the HTML.
<div id="canvas" class="flow">
<div class="square first"></div>
<div class="square second"></div>
<div class="square third"></div>
</div>
The CSS.
.square {
width: var(--step-3);
height: var(--step-3);
background-color: var(--color-text);
transition-duration: 1s;
}
.clicked .square {
background-color: var(--color-primary);
transform: translateX(100%) rotate(90deg);
}
.first {
transition-delay: 0;
}
.second {
transition-delay: 500ms;
}
.third {
transition-delay: 1000ms;
}
Here’s the JavaScript.
import { transitionsAllSettled } from "transitions-all-settled";
const canvas = document.getElementById("canvas");
canvas.addEventListener("click", async () => {
canvas.classList.toggle("clicked");
await transitionsAllSettled(canvas);
alert("Transitions All Settled");
});
The package is very small. Take a look at the source to see exactly how it works.