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

Bramus

View Transition API (API chuyển đổi khung hiển thị) giúp bạn tạo hiệu ứng chuyển đổi hình ảnh liền mạch giữa các khung hiển thị trên trang web. Điều này 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ọ di chuyển 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 một trang (SPA).

Sau đây là một số trường hợp điển hình 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 đổi thành hình ảnh sản phẩm ở kích thước đầy đủ trên trang chi tiết sản phẩm.
• Thanh điều hướng cố định vẫn ở nguyên vị trí khi bạn di chuyển từ trang này sang trang khác.
• Một lưới có các mục di chuyển vị trí khi bạn lọc.

Triển khai hiệu ứng chuyển đổi khung hiển thị

Các hiệu ứng chuyển đổi khung hiển thị không liên kết với một cấu trúc hoặc khung ứng dụng cụ thể 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ác thành phần và nguyên tắc giống nhau:

1. Trình duyệt sẽ chụp nhanh các trạng thái cũ và mới.
2. DOM được cập nhật trong khi quá trình kết xuất bị chặn.
3. Các hiệu ứng chuyển đổi này được cung cấp bởi Ảnh động CSS.

Điểm khác biệt duy nhất giữa hai loại này là cách bạn kích hoạt chúng.

Chuyển đổi chế độ xem trong cùng một tài liệu

Khi một hiệu ứng chuyển đổi chế độ xem chạy trên một tài liệu, hiệu ứng đó được gọi là hiệu ứng chuyển đổi chế độ xem cùng tài liệu. Điều này thường xảy ra trong các ứng dụng trang đơn (SPA). Hiệu ứng chuyển đổi chế độ xem trong cùng một tài liệu được hỗ trợ trong Chrome từ phiên bản 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 là một SPA sử dụng các hiệu ứng chuyển đổi chế độ xem cùng một tài liệu để tạo ảnh động cho các thẻ khi thẻ mới được thêm hoặc 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 chế độ xem trong cùng một tài liệu

Chuyển đổi chế độ xem giữa các tài liệu

Khi quá trình 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 các tài liệu. Đây là điều điển hình đối với MPA. Hiệu ứng chuyển đổi chế độ xem giữa các 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 để gọi nhằm bắt đầu quá trình chuyển đổi chế độ xem giữa các 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.

Để chọn sử dụng, hãy sử dụng đoạn mã CSS sau:

@view-transition {
  navigation: auto;
}

Ví dụ:

Ví dụ về Trình điều hướng ngăn xếp sau đây là một MPA sử dụng các hiệu ứng chuyển đổi chế độ xem giữa các tài liệu khác nhau. Tuỳ thuộc vào việc bạn có đi sâu hơn vào thao tác điều hướng hay không, các trang sẽ được đẩy vào ngăn xếp hoặc bật lên.

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

Tìm hiểu tất cả thông tin cần biết về hiệu ứng chuyển đổi chế độ xem trên nhiều tài liệu.

Tạo hiệu ứng chuyển đổi chế độ xem giữa các tài liệu