Thuộc tính HTML DOM Style transferTimingFunction trả về và sửa đổi hàm thể hiện đường cong tăng tốc của hiệu ứng chuyển tiếp của một phần tử.
Cú pháp
Sau đây là cú pháp -
1. Quay lại chuyển tiếpTimingFunction
object.transitionTimingFunction
2. Sửa đổi transferTimingFunction
object.transitionTimingFunction = “ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() | initial | inherit”
Hãy để chúng tôi xem một ví dụ về HTML DOM Style transferTimingFunction Thuộc tính -
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 2s;
}
.show {
font-size: 1.2rem;
margin: 1rem 0;
}
</style>
<body>
<h1>DOM Style transitionTimingFunction Property Demo</h1>
<div class='circle'></div>
<button onclick="set()" class="btn">Set transitionTimingFunction</button>
<div class="show">Now, hover on the square</div>
<script>
function set() {
document.querySelector('.circle').style.transitionTimingFunction = "ease-in-out";
}
</script>
</body>
</html> Đầu ra
Nhấp vào “ Đặt transferTimingFunction ”Và sau đó di chuột vào ô vuông“ màu đỏ ”để xem hiệu ứng chuyển tiếpTimingFunction.
