Detect the End of CSS Animations and Transitions with JavaScript

Detect the End of CSS Animations and Transitions with JavaScript

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. it's possible to detect the end of a CSS transition or ... Then bind the event with jQuery's one function, which ensures that it runs

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

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

Build a Simple Clock using Javascript and CSS

Javascript can be ideally used to do nearly everything but here today we are going to build a simple clock using Javascript and Css. We will use javascript to transform our clock and update it every second.

How to start writing less error-prone code in JavaScript

How to start writing less error-prone code in JavaScript - Everything in JavaScript is an object!’. We said that this assertion is false. Many things in JavaScript can behave like an object, but that doesn’t mean it’s the object. We can say we have three types of objects (objects, functions and arrays) in JavaScript.

Countdown with HTML, CSS, and JavaScript / How to create JavaScript Countdown

Countdown with HTML, CSS, and JavaScript / How to create JavaScript Countdown. W will build a Responsive Website with HTML, CSS, and JavaScript

How to Create a Wikipedia Search API using JavaScript and CSS

In this post, you will learn to create a **Wiki Search API based search engine**. Basically, there is a heading for telling about the search engine, a **search input**, and a button with an icon. The search input has also an **animation effect** on click, and the button for open random Wikipedia feeds. At first, it will show results about programming, you can change this in JS functions. When you will click on the **search button**, it will expand and becomes an input field. Then you can type any topic and press enter for getting the result.

Learn to use variables in CSS (CSS Tricks)

whats the variable in CSS, how to declare use them. Whats the benefit of variables in CSS. Lets learn all this. #Variables #CSS #HTML #CssVariables #ITArticles