::view-transition-image-pair()
Baseline
2025
Newly available
Since October 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
::view-transition-image-pair() là một phần tử giả CSS đại diện cho một vùng chứa cho các trạng thái khung nhìn "cũ" và "mới" trong quá trình chuyển tiếp khung nhìn — trước và sau khi chuyển tiếp.
Trong quá trình chuyển tiếp khung nhìn, ::view-transition-image-pair() được đưa vào cây phần tử giả liên kết như mô tả trong Cây phần tử giả chuyển tiếp khung nhìn. Nó luôn là phần tử con của ::view-transition-group(). Về phần tử con, nó có thể có một ::view-transition-new() hoặc một ::view-transition-old(), hoặc cả hai.
::view-transition-image-pair() được cấp các kiểu mặc định sau trong bảng kiểu của tác nhân người dùng (UA stylesheet):
:root::view-transition-image-pair(*) {
position: absolute;
inset: 0;
animation-duration: inherit;
animation-fill-mode: inherit;
animation-delay: inherit;
}
Trong quá trình chuyển tiếp khung nhìn, ::view-transition-image-pair() có isolation: isolate được thiết lập trên nó trong bảng kiểu chuyển tiếp để các phần tử con của nó có thể được pha trộn với các chế độ pha trộn không phải thông thường mà không ảnh hưởng đến các đầu ra trực quan khác.
Cú pháp
::view-transition-image-pair([ <pt-name-selector> <pt-class-selector>? ] | <pt-class-selector>) {
/* ... */
}
Tham số
*-
Bộ chọn toàn thể (
*); chọn tất cả các nhóm chuyển tiếp khung nhìn trên trang. root-
Khiến phần tử giả khớp với nhóm ảnh chụp chuyển tiếp khung nhìn
rootmặc định được tác nhân người dùng tạo ra để chứa quá trình chuyển tiếp khung nhìn cho toàn bộ trang. Nhóm này bao gồm bất kỳ phần tử nào không được gán nhóm ảnh chụp chuyển tiếp khung nhìn riêng thông qua thuộc tínhview-transition-name. <pt-name-selector>-
<custom-ident>được đặt làm giá trị của thuộc tínhview-transition-name. <pt-class-selector>-
<custom-ident>được đặt làm giá trị của thuộc tínhview-transition-classđứng trước bởi một dấu chấm (.).
Ví dụ
::view-transition-image-pair(root) {
isolation: auto;
}
::view-transition-image-pair(.card) {
isolation: isolate;
}
Đặc tả
| Specification |
|---|
| CSS View Transitions Module Level 1 # ::view-transition-image-pair |