Thuộc tính transition (shorthand) của Style trong HTML DOM

Thuộc tính style.transition trong HTML DOM là **shorthand (viết tắt)** gom 4 thuộc tính con thành một khai báo duy nhất: transition-property, transition-duration, transition-timing-function, transition-delay. Đây là cách phổ biến nhất để định nghĩa transition trong JavaScript.

Cú pháp

// Lấy giá trị shorthand
var trans = element.style.transition;

// Đặt giá trị (thứ tự: property duration timing-function delay)
element.style.transition = "width 1s ease-in-out 0.5s, opacity 0.3s linear";

Cấu trúc giá trị

Ví dụ: Set transition hoàn chỉnh bằng shorthand

<!DOCTYPE html>
<html>
<style>
  body { color: #000; height: 100vh; }
  .btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; margin: 1rem 0; }
  .circle {
    width: 100px; height: 100px; background: #db133a;
    margin: 2rem auto; /* Chưa có transition */
  }
  .circle:hover {
    width: 200px; height: 200px; border-radius: 50%;
  }
  .show { font-size: 1.2rem; margin: 1rem 0; text-align: center; }

<body>
  <h1>Demo: style.transition (shorthand)</h1>
  <div class="circle" id="circle"></div>
  <button onclick="setTransition()" class="btn">Set transition: all 1s</button>
  <div class="show">Hover vào hình tròn sau khi nhấn nút</div>
  <script>
    function setTransition() {
      document.getElementById('circle').style.transition = "all 1s";
      // Tương đương:
      // transitionProperty: "all"
      // transitionDuration: "1s"
      // transitionTimingFunction: "ease"
      // transitionDelay: "0s"
    }
  </script>
</body>
</html>

Kết quả:

1. Ban đầu: Hover → width/height/border-radius **nhảy ngay** (không có transition).
2. Nhấn nút: Set transition = "all 1s".
3. Hover lại: Tất cả 3 property **animate mượt trong 1 giây** (ease mặc định).

Ví dụ nâng cao: Nhiều property, nhiều timing

element.style.transition =
  "transform 300ms ease-out, " +
  "opacity 200ms linear 100ms, " +
  "background-color 500ms ease-in-out";

• transform: 300ms, ease-out, delay 0
• opacity: 200ms, linear, delay 100ms (chờ transform chạy 100ms)
• background-color: 500ms, ease-in-out, delay 0

Lưu ý quan trọng

• element.style.transition chỉ đọc/ghi **inline style**. Để đọc computed: getComputedStyle(el).transition.
• Thứ tự trong shorthand: property duration timing-function delay. Nếu bỏ timing-function/delay, trình duyệt hiểu theo vị trí — nhưng an toàn nhất là viết đủ hoặc dùng các property con riêng lẻ.
• transition là **animatable property** — có thể transition chính transition (meta-transition) nhưng hiếm dùng.
• Reset transition: element.style.transition = "none" hoặc element.style.transition = "".

Best Practice: Dùng transform + opacity

/* Tốt cho performance (GPU accelerated) */
.box {
  transition: transform 0.3s ease-out, opacity 0.2s linear;
}
.box:hover {
  transform: translateY(-4px) scale(1.02);
  opacity: 0.9;
}

Tránh animate width, height, top, left, margin — gây **reflow/layout thrashing**, làm chậm trang.