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

Javascript Object Oriented Programming Front End Technology

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>

Nitya Raut

Published on 27-Feb-2018 08:39:38

Previous Page Print Page