Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set the four transition properties with JavaScript?
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.
3K+ Views
