Cách đặt thuộc tính CSS cho transition (transitionProperty) bằng JavaScript

Thuộc tính transitionProperty chỉ định tên thuộc tính CSS sẽ được áp dụng hiệu ứng transition. Giá trị: none, all (mặc định), hoặc danh sách tên thuộc tính cách nhau bởi dấu phẩy.

Ví dụ minh họa

Mã sau giới hạn transition chỉ cho width và height (bỏ qua background-color, border-radius) khi nhấn nút:

<!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; /* Mặc định transition all */
    }
    #div2:hover {
      background-color: orange;
      width: 50px;
      height: 50px;
      padding: 100px;
      border-radius: 50px;
    }
  </style>
</head>
<body>
  <p>Di chuột qua DIV2</p>
  <button onclick="setTransitionProperty()">Đặt Transition Property</button>
  <div id="div1">DIV1
    <div id="div2">DIV2</div>
  </div>
  <script>
    function setTransitionProperty() {
      document.getElementById("div2").style.transitionProperty = "width, height";
      /* Chỉ width và height được transition.
         background-color, border-radius, padding sẽ thay đổi tức thì (không animate). */
    }
  </script>
</body>
</html>

Giá trị transitionProperty

• none: Không thuộc tính nào được transition.
• all (mặc định): Tất cả thuộc tính có thể animate đều được transition.
• <custom-ident>#: Danh sách tên thuộc tính (ví dụ: "width, height, opacity, transform").

Lưu ý

• Chỉ các thuộc tính **có thể animate** (animatable) mới có hiệu果: width, height, margin, padding, color, background-color, opacity, transform, v.v. Danh sách đầy đủ tại MDN.
• Tên thuộc tính viết kebab-case (background-color) trong CSS, nhưng trong JS dùng camelCase (backgroundColor) cho style property — tuy nhiên transitionProperty nhận chuỗi CSS nên viết kebab-case.
• Nếu liệt kê thuộc tính không animatable, chúng bị bỏ qua.

Shorthand transition

el.style.transition = "width 2s ease-in 1s, height 2s ease-in 1s";
/* property duration timing delay, property duration timing delay */