View Transition API mang đến cho bạn khả năng tạo hiệu ứng chuyển đổi hình ảnh liền mạch giữa nhiều khung hiển thị trên trang web. Điều này sẽ tạo ra trải nghiệm người dùng hấp dẫn hơn về mặt hình ảnh khi họ điều hướng trang web của bạn, bất kể trang web được xây dựng dưới dạng ứng dụng nhiều trang (MPA) hay ứng dụng trang đơn (SPA).
Bạn sẽ sử dụng hiệu ứng chuyển đổi giữa các thành phần hiển thị thông thường sau đây:
- Hình thu nhỏ trên trang thông tin sản phẩm chuyển đổi thành hình ảnh sản phẩm có kích thước đầy đủ trên trang chi tiết sản phẩm.
- Một thanh điều hướng cố định luôn ở vị trí khi bạn điều hướng từ trang này sang trang khác.
- Một lưới gồm các mục đang di chuyển vị trí khi bạn lọc.
Triển khai hiệu ứng chuyển đổi khung hiển thị
Hiệu ứng chuyển đổi khung hiển thị không gắn liền với một cấu trúc hoặc khung ứng dụng cụ thể, đồng thời có thể được kích hoạt không chỉ trên một tài liệu mà còn giữa hai tài liệu.
Cả hai loại chuyển đổi chế độ xem đều dựa trên các thành phần và nguyên tắc giống nhau:
- Trình duyệt sẽ chụp nhanh các trạng thái cũ và mới.
- DOM được cập nhật trong khi quá trình kết xuất bị chặn.
- Các hiệu ứng chuyển đổi này sử dụng ảnh động CSS.
Điểm khác biệt giữa hai loại này là cách bạn kích hoạt chúng.
Hiệu ứng chuyển đổi giữa chế độ xem cùng tài liệu
Khi chuyển đổi chế độ xem chạy trên một tài liệu, nó được gọi là chuyển đổi chế độ xem cùng một tài liệu. Trường hợp này thường xảy ra đối với ứng dụng trang đơn (SPA). Hiệu ứng chuyển đổi chế độ xem cùng tài liệu được hỗ trợ trong Chrome từ Chrome 111.
Cách kích hoạt
Kích hoạt chuyển đổi chế độ xem cùng một tài liệu bằng cách gọi document.startViewTransition:
function handleClick(e) {
// Fallback for browsers that don't support this API:
if (!document.startViewTransition) {
updateTheDOMSomehow();
return;
}
// With a View Transition:
document.startViewTransition(() => updateTheDOMSomehow());
}
Ví dụ:
Ví dụ về thẻ sau đây là một SPA sử dụng các hiệu ứng chuyển đổi chế độ xem cùng tài liệu để tạo ảnh động cho các thẻ khi các thẻ mới được thêm vào hoặc bị xoá.
Bắt đầu xây dựng
Tham khảo trang tài liệu dành riêng để tìm hiểu mọi thông tin về việc chuyển đổi chế độ xem cùng một tài liệu.
Tạo hiệu ứng chuyển đổi khung hiển thị cùng tài liệu
Chuyển đổi chế độ xem trên nhiều tài liệu
Khi chuyển đổi chế độ xem xảy ra giữa hai tài liệu khác nhau, quá trình này được gọi là chuyển đổi chế độ xem giữa nhiều tài liệu. Đây là điều điển hình đối với MPA. Hiệu ứng chuyển đổi giữa chế độ xem trên nhiều tài liệu được hỗ trợ trong Chrome 126 trở lên.
Cách kích hoạt
Việc chuyển đổi chế độ xem trên nhiều tài liệu được kích hoạt khi điều hướng trên nhiều tài liệu cùng nguồn gốc nếu cả hai trang đã chọn sử dụng. Nói cách khác, không có API nào cần gọi để bắt đầu chuyển đổi chế độ xem trên nhiều tài liệu. Khi người dùng nhấp vào một đường liên kết, lượt nhấp đó sẽ kích hoạt quá trình chuyển đổi trong chế độ xem.
Chọn hiển thị hàng đầu, hãy sử dụng đoạn mã CSS sau:
@view-transition {
navigation: auto;
}
Ví dụ:
Ví dụ về Stack Navigator (Trình điều hướng ngăn xếp) là một MPA sử dụng hiệu ứng chuyển đổi chế độ xem trên nhiều tài liệu giữa hai tài liệu. Tuỳ thuộc vào việc bạn có đi sâu hơn vào điều hướng hay không, các trang sẽ được đẩy lên ngăn xếp hay bật ra.
Bắt đầu xây dựng
Tìm hiểu mọi thông tin cần biết về chuyển đổi chế độ xem trên nhiều tài liệu.