Detect the End of CSS Animations and Transitions with JavaScript

Before CSS transition and animation (keyframes), to animate, we needed to code in JavaScript. But once these two properties were introduced, we can achieve complex animations with only CSS.

In JavaScript, we can call the callback function once the animation is done. But in CSS, there is no option to perform any action after the end of the transition/animation.

Whenever the transition is finished, the transitionend event will be triggered. We can use this event to find the end of the transition. We can also use it like ontransitionend.

If the browser is WebKit-based then we need to define the prefix for the event.

 "transition"      : "transitionend",
    "OTransition"     : "oTransitionEnd", // opera
    "MozTransition"   : "transitionend", // mozilla
    "WebkitTransition": "webkitTransitionEnd"

Let’s create a practical example to detect the end of a transition.

We are going to create a search box that will expand when we focus on the input.

HTML: Create an Input Box

<input type="text" class="search" placeholder = "Enter the text">

CSS: Add Style to the Input Box

.search {
  width : 200px;
  height :30px;
  border :5px solid red;
  border-radius : 10px;
  padding : 10px;
  color : blue;
  outline:none;
  transition : all .3s linear;
}

Once the input box is focused, we need to increase its width.

.expand {
  width : 50vw;
}

JavaScript: Add focus and focusout Listeners

let input = document.querySelector('.search');
input.addEventListener('focus',  function(ev, data) {
  input.classList.add('expand');
});
input.addEventListener('focusout',  function(ev, data) {
  input.classList.remove('expand');
});

This will create an expanding input box.

Now we need to detect the transition end event based on the browser. We can detect that by checking any of the transition events, available in the style attribute of any element.

function getTransitionEndEventName() {
  var transitions = {
      "transition"      : "transitionend",
      "OTransition"     : "oTransitionEnd",
      "MozTransition"   : "transitionend",
      "WebkitTransition": "webkitTransitionEnd"
   }
  let bodyStyle = document.body.style;
  for(let transition in transitions) {
      if(bodyStyle[transition] != undefined) {
          return transitions[transition];
      } 
  }
}

getTransitoin.js

// using above code we can get Transition end event name
let transitionEndEventName = getTransitionEndEventName();

Now, we need to add the event listener once the input is focused. For that, add the event listener inside the focus event callback:

input.addEventListener('focus',  function(ev) {
  input.classList.add('expand');
  input.addEventListener(transitionEndEventName, callback);
});

Once the transition is finished, the callback function will be called.

We also need to remove the transitionend event once the callback is executed, otherwise, the listener will keep running, causing it to run multiple times.

For example: On focusing input, the input box expands. This is one transition, and once the focus is out, the input box shrinks. This is also a transition. So, we need to remove the event listener inside the callback function.

function callback(ev) {
   
    console.log("transition  finished ");
    input.removeEventListener(transitionEndEventName, callback);
}

The complete code:

We can detect the name of the transition using the propertyName attribute in the ev argument of the callback function. We can also find the time taken to end the transition using the elapsedTime property.

Thanks for reading. I hope you liked this.

#css #javascript #programming