API chuyển đổi chế độ xem: Các thay đổi trạng thái và trang mượt mà trong trình duyệt
API chuyển đổi chế độ xem làm gì, cách chuyển đổi cùng một tài liệu và tài liệu chéo hoạt động, cách tạo kiểu cho chúng bằng CSS và cách sử dụng chúng một cách có trách nhiệm.
Điểm chính
API chuyển tiếp chế độ xem cho phép trình duyệt hoạt ảnh giữa hai trạng thái của một trang. Gọi document.startViewTransition() với chức năng cập nhật DOM và trình duyệt chụp nhanh các chế độ xem cũ và mới cũng như hoạt ảnh giữa chúng mà bạn có thể tạo kiểu bằng các phần tử giả ::view-transition. Nó hoạt động trong các ứng dụng một trang và trong các trình duyệt hỗ trợ, trên các điều hướng trên trang.
Nó hoạt động như thế nào
MDN mô tả document.startViewTransition() khi bắt đầu chuyển đổi chế độ xem cùng một tài liệu, điển hình trong các ứng dụng một trang. Trình duyệt ghi lại chế độ xem hiện tại, chạy bản cập nhật của bạn, ghi lại chế độ xem mới và tạo hoạt ảnh giữa chúng. Theo mặc định, đó là sự mờ dần; CSS cho phép bạn thay đổi nó.
Cùng một tài liệu và tài liệu chéo
Chuyển đổi cùng một tài liệu chạy bên trong một trang, như trong SPA và Chrome đã hỗ trợ chúng kể từ Chrome 111. Chuyển đổi nhiều tài liệu hoạt hình giữa các trang riêng biệt trong các trang nhiều trang, điều mà MDN ghi chú trước đây là không thể; họ sử dụng các sự kiện hoán đổi trang và tiết lộ trang cũng như chọn tham gia CSS. Hỗ trợ trình duyệt khác nhau giữa hai trình duyệt, vì vậy hãy kiểm tra các bảng tương thích hiện tại.
Tạo kiểu cho quá trình chuyển đổi
Hầu hết các tùy chỉnh đều đơn giản là CSS:
- Đặt cho một phần tử một tên chuyển đổi chế độ xem để tạo hiệu ứng cho phần tử đó tách biệt với phần còn lại của trang, chẳng hạn như hình thu nhỏ phát triển thành hình ảnh anh hùng.
- Nhắm mục tiêu ::view-transition-old() và ::view-transition-new() để tùy chỉnh hoạt ảnh.
- Giữ thời lượng ngắn và chuyển động có ý nghĩa.
- Bao bọc các hoạt ảnh tùy chỉnh trong các kiểm tra ưu tiên giảm chuyển động.
Cải tiến tiến bộ
Luôn kiểm tra hỗ trợ trước khi gọi API và cập nhật trực tiếp DOM nếu thiếu. Trang sẽ hoạt động giống hệt nhau mà không có hoạt ảnh. Tránh chuyển đổi dài khi điều hướng, khiến toàn bộ trang web có cảm giác chậm hơn.
Đoạn mã triển khai thực tế
// Same-document transition with a safe fallback
function navigate(updateDom) {
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!document.startViewTransition || reduce) {
updateDom();
return;
}
document.startViewTransition(() => updateDom());
}
/* CSS: animate one element on its own */
.product-image { view-transition-name: product-image; }
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 200ms;
}Nguyên tắc chính cần nhớ
- startViewTransition() chụp nhanh các chế độ xem cũ và mới cũng như hoạt ảnh giữa chúng
- Tồn tại các biến thể cùng một tài liệu (SPA) và nhiều tài liệu (nhiều trang)
- Kiểu với các phần tử giả view-transition-name và ::view-transition
- Kiểm tra hỗ trợ và quay lại bản cập nhật tức thì
- Giữ chuyển tiếp ngắn và tôn trọng chuyển động giảm
Câu hỏi thường gặp
Nguồn
- View Transition API — Tài liệu web MDN
- Smooth transitions with the View Transition API — Chrome dành cho nhà phát triển