Thuộc tính HTML DOM Style transferDelay trả về và sửa đổi khi nào hiệu ứng chuyển tiếp của một phần tử sẽ bắt đầu.
Cú pháp
Sau đây là cú pháp -
1. Quay lại chuyển tiếpDelay
object.transitionDelay
2. Sửa đổi chuyển tiếp Thời gian trễ
object.transitionDelay = “value”
Ở đây, giá trị có thể là -
| Sr.No | Giá trị &Giải thích |
|---|---|
| 1 | tên đầu tiên Nó đặt giá trị thuộc tính này thành giá trị mặc định. |
| 2 | kế thừa Nó kế thừa giá trị thuộc tính này từ phần tử mẹ của nó. |
| 3 | thời gian Nó biểu thị độ trễ của hiệu ứng chuyển đổi tính bằng giây (s) hoặc mili giây (mili giây). |
Hãy để chúng tôi xem một ví dụ về Chuyển đổi kiểu DOM trong HTML Thuộc tính trễ -
Ví dụ
<!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 {
height: 100px;
width: 100px;
background-color: #db133a;
}
.circle:hover {
height: 200px;
width: 200px;
border-radius: 50%;
transition: all 1s;
}
.show {
font-size: 1.2rem;
margin: 1rem 0;
}
</style>
<body>
<h1>DOM Style transitionDelay Property Demo</h1>
<div class='circle'></div>
<button onclick="set()" class="btn">Set TransitionDelay</button>
<div class="show">Now, hover on the square</div>
<script>
function set() {
document.querySelector('.circle').style.transitionDelay = "2s";
}
</script>
</body>
</html> Đầu ra
Nhấp vào “ Đặt TransitionDelay ”Và sau đó di chuột vào hình vuông“ màu đỏ ”để xem hiệu ứng Chuyển tiếp thời gian trễ.
