How to set the four transition properties with JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will learn how to set the four transition properties with JavaScript.

The transition is a CSS property used to set the transition effect of an element. It is a shorthand property for the following: transitionProperty, transitionDuration, transitionTimingFunction, and transitionDelay.

The transitionProperty is used to specify the CSS property name that should have the transition effect. The transitionDuration property is used to specify the total time to complete the transition. The transitionTimingFunction is used to specify the speed curve of the transition. The transitionDelay is used to specify after how much time the transition will start.

To set the four transition properties with JavaScript, we have multiple ways, and in this tutorial, we will discuss two of them −

Using the style.transition Property
Using the style.setProperty() Method

Using the style.transition Property

In JavaScript, the style.transition property of an element is used to set the four transition properties of an element. As the style.transition property is available in the element object, and we need to access the element object first with the document.getElementById() method and then use this property to set four transition properties.

Syntax

const object = document.getElementById('id')
object.style.transition = transitionProperty transitionDuration transitionTimingFunction transitionDelay | inherit | initial

In the above syntax, The document.getElementById() method is used to access the element object of an HTML element with the id attribute as ‘id’, and then we set the style.transition property.

Parameters

transitionProperty − The property name that should have the transition effect.
transitionDuration − Total time to complete a transition effect.
transitionTimingFunction − The speed curve of a transition effect.
transitionDelay − The time delay to start a transition effect.
inherit − The transition property is inherited by its parent element.
initial − The transition property is set to default.

Example

In the below example, we have used the style.transition property to set the four transition properties with JavaScript. We have used a button “Set Transition” click event to execute the “setTransition()” function that sets the transition effect for multiple elements.


<html>
<head>
   <style>
      .transition {
         padding: 10px;
         margin: 5px 0px;
         border: 1px solid gray;
         background-color: aliceblue;
         width: 30%;
      }
      .transition:hover {
         width: 90%;
      }
   </style>
</head>
<body>
   <h2>Using the style.transition Property</h2>
   <p>Please Hover over the DIVs to see the transition before and after clicking the "Set Transition" button.</p>
   <button onclick="setTransition()"> Set Transition </button>
   <div>
      <div id="element1" class="transition"> transition: width 2s linear 1s </div>
      <div id="element2" class="transition"> transition: all 1s ease-in 0.1s </div>
      <div id="element3" class="transition"> transition: all 0.1s ease-out 0.1s </div>
   </div>
   <script>
      const element1 = document.getElementById('element1')
      const element2 = document.getElementById('element2')
      const element3 = document.getElementById('element3')
      
      // 'Set Transition' button click event handler function
      function setTransition() {
         element1.style.transition = 'width 1s linear 1s'
         element2.style.transition = 'all 1s ease-in 0.1s'
         element3.style.transition = 'all 0.1s ease-out 0.1s'
      }
   </script>
</body>
</html>

Using the style.setProperty() Method

In JavaScript, the style.setProperty method sets a property of an element, either new or existing. The transition property can also be set using this method. Firstly, the document.getElementById() method is used to access the element and then set the ‘transition’ property using the style.setProperty method. In the property name parameter of style.setProperty method should be ‘transition’, and the value and priority will be as per the user’s requirement.

Syntax

const object = document.getElementById('id')
object.style.setProperty(property_name, value, priority)

In the above syntax, the document.getElementById() method is used to access the element object of an HTML element with the id attribute as ‘id’, and then we use the style.setProperty method on that element object.

Parameters

property_name − The name of the property to be set.
value − The new value of the property.
priority − The priority of the property value (Optional).

Example

In the below example, we have used the style.setProperty method to set the four transition properties with JavaScript. We have used four input fields to take the user’s input for four properties of transition: transitionProperty, transitionDuration, transitionTimingFunction, and transitionDelay. A button “Set Transition” is associated with a click event that executes the “setTransition()” function, which sets the four transition properties of an element.


<html>
<head>
   <style>
      #root {
         padding: 20px;
         margin: 5px 0px;
         border: 1px solid black;
         background-color: aliceblue;
         width: 30%;
      }

      #root:hover {
         width: 90%;
         background-color: aqua;
      }

      label {
         margin-right: 5px;
         font-weight: bold;
      }

      .input-field {
         margin-bottom: 5px;
      }
   </style>
</head>
<body>
   <h2>Using <i> style.setProperty() </i> method with JavaScript</h2>
   <p> Please Hover over the below box to see the transition before and after clicking the "Set Transition" button.</p>
   <h4>Enter the four properties of transition:</h4>
   <div>
      <div class="input-field">
         <label for="transitionProperty"> transitionProperty: </label>
         <input id="transitionProperty" type="text" name="transitionProperty" value="all">
      </div>
      <div class="input-field">
         <label for="transitionDuration"> transitionDuration: </label>
         <input id="transitionDuration" type="text" name="transitionDuration" value="2s">
      </div>
      <div class="input-field">
         <label for="transitionTimingFunction"> transitionTimingFunction: </label>
         <input id="transitionTimingFunction" type="text" name="transitionTimingFunction" value="linear">
      </div>
      <div class="input-field">
         <label for="transitionDelay"> transitionDelay: </label>
         <input id="transitionDelay" type="text" name="transitionDelay" value="0.2s">
      </div>
   </div>
   <button onclick="setTextDecoration()"> Set Transition </button>
   <div id="root"> Welcome to Tutorialspoint! </div>
   <script>
      function setTextDecoration() {
         const root = document.getElementById('root')
         
         // All input fields' value
         const transitionProperty = document.getElementById('transitionProperty').value
         const transitionDuration = document.getElementById('transitionDuration').value
         const transitionTimingFunction = document.getElementById('transitionTimingFunction').value
         const transitionDelay = document.getElementById('transitionDelay').value
         root.style.setProperty('transition', transitionProperty + ' ' + transitionDuration + ' ' + transitionTimingFunction + ' ' + transitionDelay)
      }
   </script>
</body>
</html>

Before the “Set Transition” button is clicked with no input field value, the transition on hover of the element occurs with no transition effect.

After the “Set Transition” button is clicked with the input fields values, the transition effect occurs on hovering the element as per the input fields value.

In this tutorial, we discussed two approaches to set the four transition properties with JavaScript. The first approach is to use the style.transition property and the other is to use the style.setProperty() method.