overlay

Cú pháp

/* Giá trị từ khóa */
overlay: auto;
overlay: none;

/* Giá trị toàn cục */
overlay: inherit;
overlay: initial;
overlay: revert;
overlay: revert-layer;
overlay: unset;

Giá trị

auto

Phần tử được hiển thị trong lớp trên cùng nếu nó được đưa lên lớp trên cùng.

none

Phần tử không được hiển thị trong lớp trên cùng.

Định nghĩa chính thức

Cú pháp chính thức

overlay = 
  none  |
  auto  

Ví dụ

Chuyển tiếp một popover

Trong ví dụ này, một popover được hoạt hình khi nó chuyển tiếp từ trạng thái ẩn sang hiện và ngược lại.

HTML

HTML chứa một phần tử <div> được khai báo là popover sử dụng thuộc tính popover, và một phần tử <button> được chỉ định là điều khiển hiển thị popover sử dụng thuộc tính popovertarget.

<button popovertarget="mypopover">Show the popover</button>
<div popover="auto" id="mypopover">I'm a Popover! I should animate.</div>

CSS

Thuộc tính overlay chỉ có mặt trong danh sách các thuộc tính được chuyển tiếp. Vì overlay là thuộc tính được điều khiển bởi tác nhân người dùng, nó không được khai báo trong các trạng thái trước hoặc sau chuyển tiếp.

html {
  font-family: "Helvetica", "Arial", sans-serif;
}

[popover]:popover-open {
  opacity: 1;
  transform: scaleX(1);
}

[popover] {
  font-size: 1.2rem;
  padding: 10px;

  /* Final state of the exit animation */
  opacity: 0;
  transform: scaleX(0);

  transition:
    opacity 0.7s,
    transform 0.7s,
    overlay 0.7s allow-discrete,
    display 0.7s allow-discrete;
  /* Equivalent to
  transition: all 0.7s allow-discrete; */
}

/* Needs to be included after the previous [popover]:popover-open
   rule to take effect, as the specificity is the same */
@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: scaleX(0);
  }
}

/* Transition for the popover's backdrop */

[popover]::backdrop {
  background-color: transparent;
  transition:
    display 0.7s allow-discrete,
    overlay 0.7s allow-discrete,
    background-color 0.7s;
  /* Equivalent to
  transition: all 0.7s allow-discrete; */
}

[popover]:popover-open::backdrop {
  background-color: rgb(0 0 0 / 25%);
}

/* Nesting selectors (&) cannot represent pseudo-elements, so this 
   starting-style rule cannot be nested. */

@starting-style {
  [popover]:popover-open::backdrop {
    background-color: transparent;
  }
}

Hai thuộc tính chúng ta muốn hoạt hình là opacity và transform: chúng ta muốn popover mờ dần vào và ra trong khi phát triển và thu nhỏ theo chiều ngang. Chúng ta đặt trạng thái bắt đầu cho các thuộc tính này ở trạng thái ẩn mặc định của phần tử popover (được chọn qua [popover]), và trạng thái kết thúc ở trạng thái mở của popover (được chọn qua lớp giả :popover-open). Sau đó chúng ta đặt thuộc tính transition để hoạt hình giữa hai trạng thái.

Vì phần tử được hoạt hình đang được đưa lên lớp trên cùng khi hiển thị và bị xóa khỏi lớp trên cùng khi ẩn, overlay được thêm vào danh sách các phần tử được chuyển tiếp. Điều này đảm bảo rằng việc xóa phần tử khỏi lớp trên cùng bị trì hoãn cho đến khi hoạt hình kết thúc.

Các bước sau đây cũng cần thiết để hoạt hình hoạt động ở cả hai chiều:

• Trạng thái bắt đầu cho hoạt hình được đặt bên trong quy tắc at @starting-style. Điều này cần thiết để tránh hành vi không mong muốn. Theo mặc định, các chuyển tiếp không được kích hoạt trong các cập nhật kiểu đầu tiên của phần tử, hoặc khi loại display thay đổi từ none sang loại khác.
• display cũng được thêm vào danh sách các phần tử được chuyển tiếp để phần tử được hoạt hình hiển thị (đặt thành display: block) trong suốt cả hoạt hình vào và ra.

Kết quả

Thông số kỹ thuật

Khả năng tương thích trình duyệt

Xem thêm

• Mô-đun CSS transitions
• @starting-style
• transition-behavior
• Four new CSS features for smooth entry and exit animations trên developer.chrome.com (2023)