Thuộc tính transitionDelay của Style trong HTML DOM

Thuộc tính style.transitionDelay trong HTML DOM quy định **độ trễ** trước khi hiệu ứng chuyển tiếp (transition) **bắt đầu chạy**. Giúp dàn dựng chuỗi animation, tạo hiệu ứng lần lượt (stagger), hoặc chờ tương tác khác xong.

Cú pháp

// Lấy giá trị
var delay = element.style.transitionDelay;

// Đặt giá trị
element.style.transitionDelay = "2s"; // hoặc "500ms", "0s", "initial", "inherit"

Các giá trị

Ví dụ: Delay 2 giây trước khi transition

<!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; transition: all 1s; /* 1s duration */
  }
  .circle:hover {
    width: 200px; height: 200px; border-radius: 50%;
  }
  .show { font-size: 1.2rem; margin: 1rem 0; text-align: center; }

<body>
  <h1>Demo: transitionDelay</h1>
  <div class="circle" id="circle"></div>
  <button onclick="setDelay()" class="btn">Đặt delay 2s</button>
  <div class="show">Di chuột vào hình tròn sau khi nhấn nút</div>
  <script>
    function setDelay() {
      document.getElementById('circle').style.transitionDelay = "2s";
    }
  </script>
</body>
</html>

Kết quả:

1. Ban đầu: Hover → transition chạy ngay (0s delay).
2. Nhấn nút: Set delay = 2s.
3. Hover lại: **Chờ 2 giây** rồi mới bắt đầu phóng to — tổng thời gian từ hover đến xong = 2s delay + 1s duration = 3s.

Ứng dụng thực tế

• Stagger animation: Các item trong danh sách delay tăng dần (0.1s, 0.2s, 0.3s...) → hiệu ứng gợn sóng.
• Chờ trạng thái khác: Delay transition color cho đến khi loading xong.
• Negative delay: transitionDelay: "-0.5s" → transition bắt đầu từ giữa (như đã chạy nửa đường).
• Multiple delays: transition-delay: 0s, 1s, 2s cho các property khác nhau.

Lưu ý

• Delay **không tính vào duration** — tổng thời gian = delay + duration.
• element.style.transitionDelay chỉ inline style. Dùng getComputedStyle để đọc giá trị từ CSS.
• Kết hợp với transitionTimingFunction, transitionDuration, transitionProperty hoặc shorthand transition.

Shorthand transition

/* property duration timing-function delay */
transition: width 1s ease-in-out 2s, height 1s ease 2s, background 0.5s linear 0s;