Trang này được dịch bởi Cloud Translation API.

Chuyển đổi mượt mà với View Transition API

Bramus

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 chế độ xem 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 với 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.

Các hiệu ứng chuyển đổi được tạo bằng View Transition API. Thử dùng trang web minh hoạ. Yêu cầu phải có Chrome 111 trở lên.

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.

Hỗ trợ trình duyệt

Nguồn

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ản ghi bản minh hoạ về Thẻ. Yêu cầu phải có Chrome 111 trở lên.

Bắt đầu xây dựng

Tham khảo trang tài liệu chuyên biệt để tìm hiểu mọi thông tin về việc chuyển đổi giữa 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.

Hỗ trợ trình duyệt

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 sử dụng, 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.

Ghi lại bản minh hoạ Trình điều hướng ngăn xếp. Yêu cầu phải có Chrome 126 trở lên.

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.

Tạo hiệu ứng chuyển đổi khung hiển thị trên nhiều tài liệu