View Transition API (API Chuyển đổi khung hiển thị) cho phép bạn tạo các lượt chuyển đổi hình ảnh liền mạch giữa các khung hiển thị trên trang web. Nhờ vậy, người dùng sẽ có được trải nghiệm người dùng hấp dẫn hơn khi họ thao tác trên trang web của bạn, bất kể trang web đó được tạo dưới dạng ứng dụng nhiều trang (MPA) hay ứng dụng trang đơn (SPA).
Sau đây là các trường hợp thông thường mà bạn sẽ sử dụng hiệu ứng chuyển đổi khung hiển thị:
- Hình thu nhỏ trên trang thông tin sản phẩm chuyển tiếp 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 sẽ cố định khi bạn điều hướng từ trang này sang trang khác.
- Một lưới có các mục sẽ di chuyển vị trí khi bạn lọc qua.
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 cụ thể của ứng dụng và 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 khác nhau.
Cả hai loại chuyển đổi chế độ xem đều dựa trên cùng một khối dựng và nguyên tắc:
- Trình duyệt 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.
- Hiệu ứng chuyển đổi sử dụng Ảnh động CSS.
Một điểm khác biệt giữa hai loại là cách bạn kích hoạt chúng.
Hiệu ứng chuyển đổi chế độ xem cùng tài liệu
Khi một lượt chuyển đổi thành phần hiển thị chạy trên một tài liệu, hiệu ứng này được gọi là chuyển đổi thành phần hiển thị cùng một tài liệu. Trường hợp này thường xảy ra trong các ứ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 quá trình chuyển đổi khung hiển thị 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 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 chuyên biệt để tìm hiểu tất cả những thông tin cần biết về việc chuyển đổi chế độ xem cùng một tài liệu.
Tạo hiệu ứng chuyển đổi chế độ xem cùng tài liệu
Chuyển đổi chế độ xem nhiều tài liệu
Khi quá trình chuyển đổi thành phần hiển thị 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 nhiều tài liệu. Đây là trường hợp điển hình đối với MPA. Hiệu ứng chuyển đổi chế độ xem 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 nhiều tài liệu sẽ được kích hoạt bởi một thao tác điều hướng trên nhiều tài liệu có cùng nguồn gốc, nếu cả hai trang đều chọn sử dụng. Nói cách khác, không có API nào gọi để bắt đầu chuyển đổi chế độ xem 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 chế độ xem.
Lựa chọn sử dụng hàng đầu, hãy sử dụng đoạn mã CSS sau:
@view-transition {
navigation: auto;
}
Ví dụ:
Ví dụ sau đây về Stack Navigator là một MPA sử dụng quá trình chuyển đổi chế độ xem nhiều tài liệu giữa hai tài liệu khác nhau. Tuỳ thuộc vào việc bạn có đang tìm hiểu sâu hơn về thao tác hay không, các trang sẽ được đẩy vào ngăn xếp hoặc bật ra.
Bắt đầu xây dựng
Tìm hiểu tất cả những thông tin cần biết về việc chuyển đổi chế độ xem nhiều tài liệu.