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

Bramus

View Transition API giúp bạn tạo các hiệu ứng chuyển đổi trực quan 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 thị giác cho người dùng khi họ điều hướng trên 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 một trang (SPA).

Sau đây là những tình huống đ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 trang thông tin sản phẩm chuyển 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.
• 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ị

Hiệu ứng chuyển đổi khung hiển thị không bị ràng buộc 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 hiệu ứng chuyển đổi khung hiển thị đều dựa trên cùng một thành phần và nguyên tắc:

1. Trình duyệt sẽ chụp nhanh 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 hỗ trợ 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 khung hiển thị chạy trên một tài liệu duy nhất, hiệu ứng đó được gọi là hiệu ứng chuyển đổi khung hiển thị trong cùng một tài liệu. Đây thường là trường hợp trong các ứng dụng trang đơn (SPA). Chrome hỗ trợ hiệu ứng chuyển đổi chế độ xem trong cùng một tài liệu từ Chrome 111.

Cách kích hoạt

Kích hoạt hiệu ứng chuyển đổi chế độ xem cùng 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 hiệu ứng chuyển đổi khung hiển thị trong 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

Hãy tham khảo trang tài liệu chuyên biệt để tìm hiểu mọi thông tin về hiệu ứng chuyển đổi chế độ xem trong 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

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

Khi một hiệu ứng chuyển đổi khung hiển thị xảy ra giữa hai tài liệu khác nhau, thì đó được gọi là hiệu ứng chuyển đổi khung hiển thị giữa các tài liệu. Đây là điều thường thấy đối với MPA. Chrome 126 trở lên có hỗ trợ hiệu ứng chuyển đổi chế độ xem giữa các tài liệu.

Cách kích hoạt

Hiệu ứng chuyển đổi chế độ xem giữa các tài liệu được kích hoạt bằng một thao tác điều hướng giữa các 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 nhằm bắt đầu một hiệu ứng 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 hiệu ứng chuyển đổi khung hiển thị.

Để chọn sử dụng, hãy 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 để chuyển đổi giữa hai tài liệu khác nhau. Tuỳ thuộc vào việc bạn có đi sâu hơn vào hoạt động điều hướng 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 mọi điều bạn cần biết về hiệu ứng chuyển đổi chế độ xem giữa các tài liệu.

Tạo hiệu ứng chuyển đổi khung hiển thị giữa các tài liệu