How to set the CSS property that the transition effect is for with JavaScript?


Use the transitionProperty in JavaScript to set the CSS property. You can try to run the following code to return the CSS property that the transition effect is for with JavaScript −

Example

<!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 3s;
         }
         #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.transitionProperty = "width,height";
         }
      </script>
   </body>
</html>

Updated on: 23-Jun-2020

55 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements