Thuộc tính chuyển tiếp Kiểu DOM trong HTML trả về và sửa đổi giá trị của thuộc tính CSS chuyển tiếp của một phần tử HTML trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
1. Quay lại quá trình chuyển đổi
object.transition
2. Đang sửa đổi quá trình chuyển đổi
object.transition = “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ó. |
| độ trễ thời gian của thuộc tính-chức năng | Ở đây, thuộc tính đại diện cho tên của thuộc tính CSS sẽ là hàm transfer.timing đại diện cho đường cong tăng tốc của hiệu ứng chuyển tiếp. độ trễ biểu thị khi nào hiệu ứng chuyển tiếp sẽ bắt đầu. |
Hãy để chúng tôi xem một ví dụ về Thuộc tính chuyển đổi kiểu HTML DOM:
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%;
}
.show {
font-size: 1.2rem;
margin: 1rem 0;
}
</style>
<body>
<h1>DOM Style transition Property Demo</h1>
<div class='circle'></div>
<button onclick="set()" class="btn">Set Transition</button>
<div class="show">Now, hover on the square</div>
<script>
function set() {
document.querySelector('.circle').style.transition = "all 1s";
}
</script>
</body>
</html> Đầu ra
Nhấp vào “ Đặt chuyển tiếp ”Rồi di chuột vào ô vuông“ đỏ ”để xem hiệu ứng chuyển tiếp.
