interest-delay
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Thuộc tính CSS interest-delay chỉ định độ trễ giữa thời điểm người dùng thể hiện sự quan tâm đến phần tử interest invoker và sự kiện interest được kích hoạt, cũng như độ trễ giữa thời điểm người dùng mất quan tâm và sự kiện loseinterest được kích hoạt.
Các thuộc tính thành phần
Thuộc tính interest-delay là dạng viết tắt của các thuộc tính sau:
Cú pháp
/* Giá trị đơn */
interest-delay: normal;
interest-delay: 2s;
interest-delay: 250ms;
/* Hai giá trị */
interest-delay: 1s normal;
interest-delay: 0s 500ms;
/* Giá trị toàn cục */
interest-delay: inherit;
interest-delay: initial;
interest-delay: revert;
interest-delay: revert-layer;
interest-delay: unset;
Giá trị
Thuộc tính interest-delay nhận một hoặc hai giá trị. Giá trị đầu tiên thiết lập độ trễ trước khi sự quan tâm được thể hiện (interest-delay-start); giá trị thứ hai, nếu được cung cấp, thiết lập độ trễ trước khi sự quan tâm bị mất (interest-delay-end). Mỗi giá trị có thể là từ khóa normal hoặc giá trị <time>:
Mô tả
Phần tử điều khiển như <a> hoặc <button> có thể được đặt làm interest invoker bằng cách gán cho nó thuộc tính interestfor. Giá trị của nó phải là id của phần tử đích. Khi mối quan hệ này được thiết lập, phần tử đích bị ảnh hưởng khi người dùng "thể hiện sự quan tâm" đến phần tử invoker (ví dụ: bằng cách di chuột hoặc focus vào nó). Trường hợp sử dụng phổ biến là hiển thị popover khi hover hoặc focus. Khi người dùng "mất quan tâm", hiệu ứng dừng lại.
Khi người dùng thể hiện hoặc mất quan tâm, hiệu ứng liên quan không bắt đầu hoặc dừng lại ngay lập tức — trình duyệt thêm một độ trễ ngắn (có thể khác nhau tùy trình duyệt). Điều này ngăn preview popovers, chẳng hạn, xuất hiện ngay lập tức khi người dùng hover qua một liên kết, điều có thể gây khó chịu và phân tâm trên trang có nhiều liên kết.
Thuộc tính interest-delay cho phép bạn tùy chỉnh những độ trễ này. Bạn có thể dùng interest-delay để chỉ định độ trễ trước khi hiệu ứng quan tâm bắt đầu (được chỉ định bởi thuộc tính interest-delay-start) và độ trễ trước khi hiệu ứng quan tâm kết thúc (được chỉ định bởi thuộc tính interest-delay-end) trong một khai báo duy nhất.
Thuộc tính interest-delay có thể nhận một hoặc hai giá trị. Các giá trị này có thể là từ khóa normal, thiết lập độ trễ mặc định của trình duyệt, hoặc giá trị <time>, thiết lập độ trễ tùy chỉnh.
Nếu chỉ có một giá trị được chỉ định, nó áp dụng cho cả interest-delay-start và interest-delay-end. Nếu có hai giá trị được chỉ định, giá trị đầu tiên thiết lập interest-delay-start và giá trị thứ hai thiết lập interest-delay-end.
Định nghĩa hình thức
| Initial value | as each of the properties of the shorthand:
|
|---|---|
| Applies to | all elements |
| Inherited | yes |
| Computed value | as each of the properties of the shorthand:
|
| Animation type | as each of the properties of the shorthand:
|
Cú pháp hình thức
interest-delay =
<'interest-delay-start'>{1,2}
<interest-delay-start> =
normal |
<time>
Ví dụ
Tạo hiệu ứng interest-delay cơ bản
Trong ví dụ này, chúng ta minh họa cách interest-delay ả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</code> of <code>1s 2s</code>
</label>
</form>
CSS
Trong CSS, chúng ta định nghĩa quy tắc .delay áp dụng giá trị interest-delay là 1s 2s cho bất kỳ interest invoker nào có class delay. Chúng ta sẽ thiết lập class này trên <button> khi checkbox được tích bằng JavaScript.
.delay {
interest-delay: 1s 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, popover sẽ xuất hiện sau độ trễ 1s khi quan tâm được thể hiện, và ẩn sau độ trễ 2s khi quan tâm bị mất.
Đặc tả kỹ thuật
| Specification |
|---|
| CSS Basic User Interface Module Level 4 # propdef-interest-delay |