Sẵn sàng cho kiểm thử của nhà phát triển: Chuyển đổi chế độ xem theo phạm vi

Bramus

Ngày xuất bản: 10 tháng 9 năm 2025

Chuyển đổi khung hiển thị theo phạm vi là một tiện ích đề xuất cho View Transition API. Tiện ích này cho phép bạn bắt đầu một hiệu ứng chuyển đổi khung hiển thị trên một cây con của DOM. Tính năng này đã sẵn sàng để thử nghiệm từ Chrome 140 khi bạn bật cờ "Các tính năng thử nghiệm của nền tảng web" trong chrome://flags. Chúng tôi đang tích cực thu thập ý kiến phản hồi của nhà phát triển.

Giới thiệu nhanh

Để bắt đầu một hiệu ứng chuyển đổi khung hiển thị có phạm vi, hãy gọi element.startViewTransition() (thay vì document.startViewTransition()) trên mọi HTMLElement có contain: layout được áp dụng.

document.querySelector('nav').startViewTransition({
  callback: () => {
    // … code that manipulates the contents of <nav>
  },
})

Kết quả là một hiệu ứng chuyển đổi khung hiển thị được giới hạn trong cây con của HTMLElement mà bạn chọn, trong đó cây giả ::view-transition thu được sẽ được chèn vào HTMLElement đó. HTMLElement đóng vai trò là vùng chứa cho các ảnh động chuyển đổi.

html
  ├─ head
  └─ body
     ├─ nav
     │  ├─ ::view-transition
     │  │  └─ ::view-transition-group(thing)
     │  │     └─ ::view-transition-image-pair(thing)
     │  │        ├─ ::view-transition-old(thing)
     │  │        └─ ::view-transition-new(thing)
     │  └─ ul
     │     ├─ li
     │     ├─ li
     │     └─ li
     └─ main
        └─ …

Các hiệu ứng chuyển đổi có phạm vi cho phép nhiều hiệu ứng chuyển đổi khung hiển thị chạy cùng lúc (miễn là chúng có các gốc chuyển đổi khác nhau). Các sự kiện con trỏ chỉ bị ngăn trên cây con đó (bạn có thể bật lại), thay vì toàn bộ tài liệu. Ngoài ra, các thành phần này cho phép vẽ các phần tử bên ngoài gốc chuyển đổi lên trên cùng của hiệu ứng chuyển đổi chế độ xem có phạm vi.

Tìm hiểu tất cả về hiệu ứng chuyển đổi chế độ xem có phạm vi trong phần giải thích về hiệu ứng chuyển đổi chế độ xem có phạm vi.

Bản minh hoạ

Trong bản minh hoạ sau, bạn có thể di chuyển một dấu chấm trong vùng chứa của dấu chấm đó bằng cách nhấp vào một trong các nút. Bạn có thể thực hiện việc này bằng các hiệu ứng chuyển đổi chế độ xem theo phạm vi tài liệu hoặc hiệu ứng chuyển đổi chế độ xem theo phạm vi phần tử, cho phép bạn xem cách chúng hoạt động khác nhau.

Với hiệu ứng chuyển đổi chế độ xem có phạm vi, dấu chấm vẫn bị thành phần mẹ cắt trong quá trình chuyển đổi. Hơn nữa, dấu chấm này không xuất hiện trên cửa sổ bật lên khi được hiển thị.

Chúng tôi mong nhận được ý kiến phản hồi của bạn

Chúng tôi muốn nhận được ý kiến phản hồi của cộng đồng nhà phát triển web về:

• Hình dạng của Scoped View Transitions API.
• Các trường hợp sử dụng mà tính năng hoạt động tốt hoặc không hoạt động như mong đợi.
• Cách giải quyết các câu hỏi về phạm vi tự tham gia.

Chia sẻ ý kiến phản hồi của bạn bằng cách bình luận về vấn đề số 9890 của Nhóm công tác CSS. Hãy tìm hiểu kỹ về các vấn đề đã biết và các hạn chế trước khi gửi ý kiến phản hồi.

Nếu bạn gặp phải lỗi, hãy gửi thông báo lỗi cho Chromium để cho chúng tôi biết.