Chrome 147 cho phép chuyển đổi khung hiển thị đồng thời và lồng nhau bằng hiệu ứng chuyển đổi khung hiển thị theo phạm vi phần tử

Bramus

Ngày xuất bản: 27 tháng 3 năm 2026

Chrome 147 giới thiệu hiệu ứng chuyển đổi khung hiển thị theo phạm vi phần tử, một tính năng cho phép bạn bắt đầu hiệu ứng chuyển đổi khung hiển thị trên một cây con của DOM bằng cách gọi Element.startViewTransition().

Tính năng này cho phép nhiều hiệu ứng chuyển đổi khung hiển thị chạy đồng thời, cho phép bạn lồng các hiệu ứng chuyển đổi khung hiển thị đang diễn ra và giải quyết các vấn đề về lớp với nội dung position: fixed – tất cả đều giữ cho phần còn lại của trang có thể tương tác.

Nội dung gì đã thay đổi?

Kể từ khi thông báo rằng tính năng này đã sẵn sàng để nhà phát triển kiểm thử trong Chrome 140, chúng tôi đã cộng tác với cộng đồng và Nhóm công tác CSS để hoàn thiện các chi tiết, đặc biệt là về hành vi mặc định:

• Theo mặc định, các gốc phạm vi sẽ tự tham gia.
• Các hiệu ứng chuyển đổi chế độ xem phạm vi cụ thể tự động chứa các giả lập lồng nhau bằng cách sử dụng các nhóm hiệu ứng chuyển đổi khung hiển thị lồng nhau.
• Giả ::view-transition-group-children() trong một hiệu ứng chuyển đổi khung hiển thị chế độ xem phạm vi cụ thể sẽ tự động cắt nội dung nếu gốc phạm vi cắt phần tràn.
• Các hiệu ứng chuyển đổi khung hiển thị theo phạm vi phần tử sẽ tự động áp dụng contain: layout và view-transition-scope: all vào gốc phạm vi trong quá trình chuyển đổi.

Sau những bản cập nhật này, hiệu ứng chuyển đổi chế độ xem theo phạm vi phần tử sẽ có trong Bản ổn định của Chrome từ phiên bản 147.

Bản minh hoạ

Xáo trộn danh sách

Bản minh hoạ này cho phép bạn xáo trộn các mục trong mỗi danh sách. Bạn cũng có thể hoán đổi vị trí của các danh sách bằng cách chọn nút ở giữa.

Vì các hiệu ứng chuyển đổi khung hiển thị có phạm vi phần tử được dùng, nên cả hai danh sách đều có thể chạy đồng thời các hiệu ứng chuyển đổi khung hiển thị xáo trộn. Bạn cũng có thể bắt đầu quá trình chuyển đổi khung hiển thị bên ngoài, quá trình này sẽ hoán đổi vị trí của các danh sách trong khi các mục trong danh sách vẫn đang được sắp xếp lại.

Chuyến đi của tôi đến Patagonia

Bản minh hoạ "My Patagonia Trip" minh hoạ các hiệu ứng chuyển đổi chế độ xem theo phạm vi phần tử. Bản minh hoạ này được xây dựng dựa trên video chiến dịch "Trải nghiệm người dùng trên web, được thiết kế lại".

Sử dụng trình đơn thả xuống để lọc các mục trong lưới. Sử dụng nút Thêm trên mỗi mục trong lưới để thêm các mục đó vào danh sách các mục đã chọn xuất hiện trong thanh bên.

Bản minh hoạ này sử dụng hiệu ứng chuyển đổi khung hiển thị theo phạm vi phần tử ở 3 vị trí:

• Lưới các mục khi lọc các mục đó.
• Các mục của lưới khi thêm chúng vào danh sách các mục đã chọn.
• Thanh bên hiển thị danh sách các mục đã chọn.

Đọc hướng dẫn

Để tìm hiểu tất cả về hiệu ứng chuyển đổi chế độ xem theo phạm vi phần tử, hãy đọc hướng dẫn này. Nội dung này hướng dẫn cách triển khai các hiệu ứng chuyển đổi chế độ xem theo phạm vi phần tử, giải thích thêm chi tiết và có thêm nhiều bản minh hoạ.

Đọc hướng dẫn về hiệu ứng chuyển đổi chế độ xem theo phạm vi phần tử