Computer >> Máy Tính >  >> Lập trình >> Javascript

Làm cách nào để thiết lập đường cong tốc độ của hiệu ứng chuyển tiếp với JavaScript?


Sử dụng transferTimingFunction thuộc tính để thiết lập tốc độ của quá trình chuyển đổi. Đặt nó thành bất kỳ giá trị nào sau đây - dễ dàng, dễ vào, dễ ra, tuyến tính, v.v.

Ví dụ

Bạn có thể thử chạy đoạn mã sau để trả về đường cong tốc độ của hiệu ứng chuyển đổi bằng 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 =
            "ease-in";
         }
      </script>
   </body>
</html>