JavaScript Element transitioncancel Event

What You’ll Learn

The transitioncancel event fires when a CSS transition is canceled instead of finishing with transitionend. Learn addEventListener vs ontransitioncancel, TransitionEvent properties, how it fits with transitionrun / transitionstart / transitionend, and five try-it labs.

Introduction

CSS transitions usually end with transitionend. Sometimes they stop early—for example you leave a :hover state before the transition finishes, or you remove the class that was driving the property change. In those cases the browser fires transitioncancel instead of transitionend.

That makes transitioncancel useful for cleanup: reset UI labels, cancel follow-up work you only wanted after a completed transition, or log that the motion did not finish normally.

Understanding transitioncancel

An instance event on elements that participate in CSS Transitions. MDN: it fires when a CSS transition is canceled—after transitionrun and before a normal transitionend.

• Cancels when the transition is interrupted in either direction mid-flight.
• TransitionEvent — includes propertyName, elapsedTime, pseudoElement.
• Not the normal “transition finished” signal—that is transitionend.
• Baseline Widely available — solid modern browser support (since Nov 2020).

📝 Syntax

Use the event name with addEventListener, or set the handler property:

addEventListener("transitioncancel", (event) => { });

ontransitioncancel = (event) => { };

Event type

A TransitionEvent (inherits from Event).

Event properties

⚖️ Transition lifecycle events

MDN notes: if there is no delay or duration (both 0s or undeclared), there is no transition—and none of these events fire.

Examples Gallery

Examples follow MDN Element: transitioncancel event. Try It Yourself labs start a CSS transition, then cancel it so you can see the event fire.

const box = document.querySelector(".transition");

box.addEventListener("transitioncancel", () => {
  console.log("Transition canceled");
});

// Start then interrupt before the 2s transition ends:
box.classList.add("grown");
setTimeout(() => {
  box.classList.remove("grown");
}, 400);

Transition canceled

const box = document.querySelector(".transition");

box.ontransitioncancel = () => {
  console.log("Transition canceled");
};

box.classList.add("grown");
setTimeout(() => {
  box.classList.remove("grown");
}, 400);

Transition canceled

const box = document.getElementById("box");

box.addEventListener("transitioncancel", (event) => {
  console.log("canceled:", event.propertyName);
  console.log("elapsedTime:", event.elapsedTime);
  console.log("pseudoElement:", JSON.stringify(event.pseudoElement));
});

box.classList.add("grown");
setTimeout(() => {
  box.classList.remove("grown");
}, 300);

canceled: transform
elapsedTime: 0.3
pseudoElement: ""

const box = document.getElementById("box");
const out = document.getElementById("out");

box.addEventListener("transitioncancel", () => {
  out.textContent = "Transition canceled (class removed)";
});

box.classList.add("grown");
setTimeout(() => {
  box.classList.remove("grown");
}, 250);

Transition canceled (class removed)

const el = document.querySelector(".transition");
const message = document.querySelector(".message");
const btn = document.getElementById("toggle");

el.addEventListener("transitionrun", () => {
  message.textContent = "transitionrun fired";
});
el.addEventListener("transitionstart", () => {
  message.textContent = "transitionstart fired";
});
el.addEventListener("transitioncancel", () => {
  message.textContent = "transitioncancel fired";
});
el.addEventListener("transitionend", () => {
  message.textContent = "transitionend fired";
});

btn.addEventListener("click", () => {
  el.classList.toggle("grown");
});

transitioncancel fired

🚀 Common Use Cases

• Cleaning up UI state when a panel closes mid-transition.
• Distinguishing “finished” vs “interrupted” transition analytics.
• Skipping follow-up logic that should only run after a completed motion.
• Teaching the full CSS transition event set alongside transitionend.
• Coordinating class toggles that both start and reverse property changes.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since November 2020).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• If transitioncancel fires, transitionend will not fire for that transition.
• Zero delay and duration means no transition events at all.
• Related learning: animationcancel, touchstart, addEventListener(), JavaScript hub.

💡 Best Practices