Thuộc tính HTML DOM Style transferDuration trả về và sửa đổi thời lượng của hiệu ứng chuyển tiếp trên một phần tử tính bằng giây (giây) hoặc mili giây (mili giây) trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
1. Quay lại chuyển tiếpDuration
object.transitionDuration
2. Đang sửa đổi quá trình chuyển đổi Độ bão hòa
object.transitionDuration = “value”
Giá trị ở đây có thể là -
| Giá trị | Giải thích |
|---|---|
| tên đầu tiên | Nó đặt giá trị thuộc tính này thành giá trị mặc định. |
| kế thừa | Nó kế thừa giá trị thuộc tính này từ phần tử mẹ của nó. |
| thời gian | Nó thể hiện thời lượng của hiệu ứng chuyển đổi tính bằng giây (s) hoặc mili giây (mili giây). |
Ví dụ
Hãy để chúng tôi xem một ví dụ về Chuyển đổi kiểu DOM trong HTML Thuộc tính bão hòa -
<!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 transitionDuration Property Demo</h1>
<div class='circle'></div>
<button onclick="set()" class="btn">Change Transition</button>
<div class="show">Now, hover on the square</div>
<script>
function set() {
document.querySelector('.circle').style.transitionDuration = "5s";
}
</script>
</body>
</html> Đầu ra
Nhấp vào “ Đặt chuyển tiếp ”Rồi di chuột vào nút“ đỏ ”Vuông để xem hiệu ứng Độ bão hòa chuyển đổi.
