Transition Events
JavaScript can listen for transitionstart, transitionend, and transitioncancel events to respond when transitions complete.
CSS
Intermediate
4 min read
CSS Transition Events in JavaScript
Example
const box = document.querySelector(".box");
box.addEventListener("transitionend", (e) => {
console.log(`${e.propertyName} transition finished`);
// Remove class after fade-out completes
if (e.propertyName === "opacity") {
box.style.display = "none";
}
});
// Trigger the transition
box.classList.add("fade-out"); Pro Tip
transitionend fires once per animated property — check event.propertyName if multiple properties are transitioning.