interest-delay-end
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Thuộc tính CSS interest-delay-end chỉ định độ trễ giữa thời điểm người dùng mất quan tâm đến phần tử interest invoker và sự kiện loseinterest được kích hoạt.
Cả hai thuộc tính interest-delay-end và interest-delay-start đều có thể được đặt bằng dạng viết tắt interest-delay.
Cú pháp
/* Từ khóa hoặc độ trễ tùy chỉnh */
interest-delay-end: normal;
interest-delay-end: 2s;
interest-delay-end: 250ms;
/* Giá trị toàn cục */
interest-delay-end: inherit;
interest-delay-end: initial;
interest-delay-end: revert;
interest-delay-end: revert-layer;
interest-delay-end: unset;
Giá trị
Định nghĩa hình thức
| Initial value | normal |
|---|---|
| Applies to | all elements |
| Inherited | yes |
| Computed value | normal or a computed time |
| Animation type | by computed value type |
Cú pháp hình thức
interest-delay-end =
normal |
<time>
Ví dụ
Tạo hiệu ứng interest-delay-end cơ bản
Trong ví dụ này, chúng ta minh họa cách interest-delay-end ảnh hưởng đến hành vi của interest invoker.
HTML
Đánh dấu bao gồm một <button>, một <p>, và một <input> kiểu checkbox. Chúng ta chỉ định <button> là một interest invoker bằng cách gán cho nó thuộc tính interestfor, có giá trị khớp với id của phần tử <p>. Điều này làm cho đoạn văn trở thành phần tử đích. Đoạn văn được chuyển thành popover bằng cách gán thuộc tính popover, ban đầu ẩn nó đi.
<button interestfor="mypopover">Button</button>
<p id="mypopover" popover>Hover tooltip</p>
<form>
<input type="checkbox" id="apply-delay" />
<label for="apply-delay">
Apply an <code>interest-delay-end</code> of <code>2s</code>
</label>
</form>
CSS
Trong CSS, chúng ta chỉ định một quy tắc với selector .delay áp dụng giá trị interest-delay-end là 2s cho bất kỳ interest invoker nào có class delay. Chúng ta sẽ thiết lập điều này trên <button> khi checkbox được tích bằng JavaScript.
.delay {
interest-delay-end: 2s;
}
JavaScript
Trong script, chúng ta lấy tham chiếu đến <button> và checkbox, sau đó tạo một event listener bật/tắt class delay trên <button> mỗi khi giá trị checkbox thay đổi (khi được tích hoặc bỏ tích).
const btn = document.querySelector("button");
const checkbox = document.querySelector("input");
checkbox.addEventListener("change", () => {
btn.classList.toggle("delay");
});
Kết quả
Kết quả hiển thị như sau:
Hãy thử thể hiện sự quan tâm đến button (ví dụ: bằng cách hover hoặc focus vào nó) rồi mất quan tâm để quan sát popover hiện và ẩn. Mặc định, popover hiện và ẩn sau một khoảng trễ rất ngắn.
Bây giờ hãy tích checkbox và thử lại các hành động tương tự. Lần này, độ trễ giữa thể hiện quan tâm và popover xuất hiện không bị ảnh hưởng, nhưng độ trễ giữa mất quan tâm và popover biến mất sẽ tăng lên 2s.
Đặc tả kỹ thuật
| Thông số kỹ thuật |
|---|
| CSS Basic User Interface Module Level 4 # propdef-interest-delay-end |