transitionend

16 March, 2023

Contributors

Milsaware

@milsaware

About

The transitionend event is fired when a CSS transition has completed on an element. This event allows you to add custom JavaScript code that will run as soon as a CSS transition has ended.

When a CSS transition is applied to an element, it changes the value of one or more CSS properties over time. The transitionend event is fired when the transition has completed, either because the property has reached its final value or because the transition has been interrupted or cancelled.

You can use the addEventListener() method to add a transitionend event listener to an element in JavaScript. When the transitionend event is fired, the event listener function will be called, allowing you to perform any necessary actions in response to the completion of the transition.

The transitionend event is useful for creating animations or other effects that depend on the completion of a CSS transition. By listening for this event, you can synchronise your JavaScript code with the completion of the transition, ensuring that your animation or effect runs smoothly and without any unexpected delays.

Event listener

Here's an example of how to use the transitionend event listener to detect when a CSS transition has completed on an HTML element:

CSS

#my-element {
    background-color: red;
    transition: background-color 1s;
}

#my-element.active {
    background-color: blue;
}

HTML

<div id="my-element">Click me!</div>

JavaScript

const myElement = document.getElementById('my-element');

myElement.addEventListener('transitionend', () => {
    console.log('Transition ended!');
});

myElement.addEventListener('click', () => {
    myElement.classList.toggle('active');
});

Here, we're using CSS to create a transition that changes the background colour of the div element with the ID "my-element" from red to blue over a period of 1 second.

We've added an event listener to the myElement variable using the addEventListener() method. The event listener function is called whenever the transitionend event is fired on the element. In this case, we're simply logging a message to the console to indicate that the transition has ended.

We've also added a separate event listener to the myElement variable that toggles the active class on and off whenever the element is clicked. This triggers the CSS transition and causes the transitionend event to be fired when the transition is complete.

Note that the transitionend event is fired for each property that is being transitioned. If multiple properties are being transitioned at the same time, the event will be fired once for each property that has completed its transition.

Property

Here's an example of how to use the ontransitionend property to add a transitionend event listener to an HTML element:

const myElement = document.getElementById('my-element');

myElement.ontransitionend = function() {
    console.log('Transition ended!');
}

myElement.addEventListener('click', function() {
    myElement.classList.toggle('active');
});

Here, we've added an ontransitionend property to the myElement variable and assigned it a function that will be called whenever the transitionend event is fired on the element. In this case, we're simply logging a message to the console to indicate that the transition has ended.

Inline

Here's an example of how to use the ontransitionend inline attribute to add a transitionend event listener to an HTML element:

HTML

<div id="my-element" ontransitionend="handleTransitionEnd()">Click me!</div>

JavaScript

function handleTransitionEnd() {
    console.log('Transition ended!');
}

const myElement = document.getElementById('my-element');

myElement.addEventListener('click', function() {
    myElement.classList.toggle('active');
});

Here, we've added an ontransitionend inline attribute to the my-element div and assigned it a function that will be called whenever the transitionend event is fired on the element. In this case, we're using a named function called handleTransitionEnd() that simply logs a message to the console to indicate that the transition has ended.

Note that using inline attributes like ontransitionend is generally considered bad practice, as it can make your code harder to read and maintain. It's generally better to use the addEventListener() method or the ontransitionend property to add event listeners to your HTML elements.

Programmatic trigger

There is no transitionend() method to trigger the transitionend event programmatically. The transitionend event is triggered automatically by the browser when a CSS transition on an element ends.

However, you can use the dispatchEvent() method to programmatically trigger the transitionend event on an element:

const myElement = document.getElementById('my-element');

myElement.addEventListener('transitionend', function(event) {
    console.log('Transition ended!');
});

myElement.addEventListener('click', function() {
    myElement.classList.toggle('active');
    myElement.dispatchEvent(new Event('transitionend'));
});

Here, we're using CSS to create a transition that changes the background colour of the div element with the ID "my-element" from red to blue over a period of 1 second.

We've added an event listener to the myElement variable that listens for the transitionend event and logs a message to the console when it is fired.

We've also added a separate event listener to the myElement variable that toggles the active class on and off whenever the element is clicked. In addition to toggling the class, we're also dispatching a new transitionend event using the dispatchEvent() method to simulate the end of the CSS transition.

Note that while using dispatchEvent() can be a useful technique in certain situations, it's generally best to rely on the browser to trigger the transitionend event automatically. Only use dispatchEvent() when you have a specific need to simulate the end of a CSS transition programmatically.

javascript