Web/API/Window/transitioncancel event

This is an experimental technologyCheck the Browser compatibility table carefully before using this in production.

The transitioncancel event is fired when a CSS transition is canceled.

See GlobalEventHandlers.ontransitioncancel for more information.

Bubbles	Yes
Cancelable	No
Interface	TransitionEvent
Event handler property	GlobalEventHandlers.ontransitioncancel

The original target for this event is the Element that had the transition applied. You can listen for this event on the Window interface to handle it in the capture or bubbling phases. For full details on this event please see the page on HTMLElement: transitioncancel.

Examples

This code adds a listener to the transitioncancel event:

window.addEventListener('transitioncancel', () => {
  console.log('Transition canceled');
});

The same, but using the ontransitioncancel property instead of addEventListener():

window.ontransitioncancel = () => {
  console.log('Transition canceled');
};

See a live example of this event.

Specifications

Specification	Status	Comment
CSS TransitionsThe definition of 'transitioncancel' in that specification.	Working Draft	Initial definition.

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
transitioncancel event	Chrome No support No	Edge No support No	Firefox Full support 53	IE ?	Opera ?	Safari Full support 13.1 Full support 13.1 Full support 12 Disabled' Disabled' From version 12: this feature is behind the Web Animations preference and the CSS Animations via Web Animations preference.	WebView Android No support No	Chrome Android No support No	Firefox Android Full support 53	Opera Android ?	Safari iOS Full support 13.4 Full support 13.4 Full support 12 Disabled' Disabled' From version 12: this feature is behind the Web Animations preference and the CSS Animations via Web Animations preference.	Samsung Internet Android No support No

Legend

Full support  

Full support

No support  

No support

Compatibility unknown  

Compatibility unknown

User must explicitly enable this feature.'

User must explicitly enable this feature.

See also

• The GlobalEventHandlers.ontransitioncancel event handler
• The TransitionEvent interface
• CSS properties: transition, transition-delay, transition-duration, transition-property, transition-timing-function
• Related events: transitionrun, transitionstart, transitionend
• This event on HTMLElement targets: transitioncancel
• This event on Document targets: transitioncancel

Window: transitioncancel event by Mozilla Contributors is licensed under CC-BY-SA 2.5.