How to set when the transition effect will start with JavaScript?

Javascript Object Oriented Programming Front End Technology

In this tutorial, we shall learn to set when the transition effect starts with JavaScript. To set when the transition effect will start, use the JavaScript transitionDelay property.

To make interactive components, we go for transition effects. Here let us get deeper into the topic and understand how we can set the transition start.

Using the Style transitionDelay Property

With Style transitionDelay property, we can set or return when the transition effect starts. We can specify the transitionDelay value in seconds(s) or milliseconds(ms). The delay can be either negative, positive, or zero.

The transition effect starts immediately with a negative value of the transition delay. Users can see the animation as if it comes very early. The transition effect starts at a given time with a positive value of the transition delay. The transition effect begins immediately with a zero value of transition delay.

We can specify multiple delays also. If we give two transition delay values, the first value affects the first transition property, and the second value affects the second transition property.

The animation starts with the hover on the element if we don't specify transition delay.

Users can follow the syntax below for using the transitionDelay property.

Syntax

object.style.transitionDelay = "time|initial|inherit"

The above syntax sets the required transition delay to the element's style.

Parameters

time − It defines the time to wait before the transition starts.
initial − Sets this property to its default value.
inherit − Inherits this property from its parent element.

The default value of the transitionDelay property is 0. The return value is a string that represent the transitionDelay property of the element.

Example 1

You can try to run the following code to learn how to return when the transition effect will start with JavaScript −


<!DOCTYPE html>
<html>
<head>
   <style>
      #div1 {
         position: relative;
         margin: 10px;
         height: 300px;
         width: 400px;
         padding: 20px;
         border: 2px solid blue;
      }
      #div2 {
         padding: 80px;
         position: absolute;
         border: 2px solid BLUE;
         background-color: yellow;
         transform: rotateY(45deg);
         transition: all 5s;
      }
      #div2:hover {
         background-color: orange;
         width: 50px;
         height: 50px;
         padding: 100px;
         border-radius: 50px;
      }
   </style>
</head>
<body>
   <p>Hover over DIV2</p>
   <button onclick = "display()">Set</button>
   <div id = "div1">DIV1
   <div id = "div2">DIV2</div>
   </div>
   <script>
      function display() {
         document.getElementById("div2").style.transitionTimingFunction = "easein";
         document.getElementById("div2").style.transitionDelay = "1s";
      }
   </script>
</body>
</html>

Example 2

Here, we set different transition delays to three elements. When the user presses the button, we call the function to set the transition delay with the syntax given above.

The elements have no transition delay before the user clicks on the button. But the animation starts on mouse hover or touch.


<html>
<head>
   <style>
      .trans{
         width: 90px;
         height: 90px;
         background-color: #5F9EA0;
         border: 5px dotted black;
         display: inline-block;
         margin-right: 15px;
         color: #FFFFFF;
      }
      .trans:hover{
         height: 200px;
      }
      #trans1{
         transition-duration: 5s;
      }
      #trans2{
         transition-duration: 2s;
         background-color: #4682B4;
      }
      #trans3{
         transition-duration: 400ms;
         background-color: #DA70D6;
      }
   </style>
</head>
<body>
   <h2> Set when the transition starts using <i> the transitionDelay property. </i></h2>
   <div class = "trans" id = "trans1"> No delay </div>
   <div class = "trans" id = "trans2"> Nodelay </div>
   <div class = "trans" id = "trans3"> No delay </div>
   <div id = "transDelBtnWrap">
      <p> Click on the button and touch or mouse over the boxes to set
      the transition delay. </p>
      <button onclick = "setTransitionDelay();"> Set </button>
   </div>
</body>
<script>
   function setTransitionDelay(){
      var transDelBtnWrap = document.getElementById("transDelBtnWrap");
      var transDelEl1 = document.getElementById("trans1");
      var transDelEl2 = document.getElementById("trans2");
      var transDelEl3 = document.getElementById("trans3");
      transDelEl1.style.transitionDelay = "-1s";
      transDelEl1.innerHTML = "-1s delay";
      transDelEl2.style.transitionDelay = "2s";
      transDelEl2.innerHTML = "2s delay";
      transDelEl3.style.transitionDelay = "900ms";
      transDelEl3.innerHTML = "900ms delay";
   }
</script>
</html>

Example 3

In this program, we set multiple and different transition delays to various elements in a sequence.

When the user presses the button, we call the function to set the transition delay with the syntax given above.


<html>
<head>
   <style>
      #fader td{
         background-color: grey;
         transition-timing-function: cubic-bezier(1,0,1,0);
         transition-duration: 0.5s;
      }
      #fader:hover #fade1{
         background-color: lavender;
      }
      #fader:hover #fade2{
         background-color: #5F9EA0;
      }
      #fader:hover #fade3{
         background-color: #4682B4;
      }
      #fader:hover #fade4{
         background-color: #1E90FF;
      }
      #fader:hover #fade5{
         background-color: #3CB371;
      }
   </style>
</head>
<body>
   <h2> The JavaScript program to set when the transition starts using
      <i> the transitionDelay property. </i>
   </h2>
   <table id = "fader" cellpadding = "10" cellspacing = "2">
      <tr>
         <td id = "fade1"> No delay </td>
         <td id = "fade2"> No delay </td>
         <td id = "fade3"> No delay </td>
         <td id = "fade4"> No delay </td>
         <td id = "fade5"> No delay </td>
      </tr>
   </table>
   <div id="usrTransBtnWrap">
      <p>Click on the button and touch or mouse over any one box to set
      sequential multiple transition delay.</p>
      <button onclick="setSequenceDelay();">Set</button>
   </div>
</body>
<script>
   function setSequenceDelay(){
      var usrTransBtnWrap = document.getElementById("usrTransBtnWrap");
      usrTransBtnWrap.style.display = "none";
      var usrTransEl1 = document.getElementById("fade1");
      var usrTransEl2 = document.getElementById("fade2");
      var usrTransEl3 = document.getElementById("fade3");
      var usrTransEl4 = document.getElementById("fade4");
      var usrTransEl5 = document.getElementById("fade5");
      usrTransEl1.style.transitionDelay = "0s,5s";
      usrTransEl1.innerHTML = "0s,5s";
      usrTransEl2.style.transitionDelay = "5s,10s";
      usrTransEl2.innerHTML = "5s,10s";
      usrTransEl3.style.transitionDelay = "10s,15s";
      usrTransEl3.innerHTML = "10s,15s";
      usrTransEl4.style.transitionDelay = "15s,20s";
      usrTransEl4.innerHTML = "15s,20s";
      usrTransEl5.style.transitionDelay = "20s,25s";
      usrTransEl5.innerHTML = "20s,25s";
   }
</script>
</html>