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

Hiệu ứng chuyển đổi khung hiển thị giữa các tài liệu cho phép bạn tạo hiệu ứng chuyển đổi mượt mà, giống như ứng dụng giữa các trang khác nhau của Ứng dụng nhiều trang (MPA). Theo mặc định, trình duyệt sẽ thực hiện hiệu ứng mờ dần, nhưng bạn có thể tuỳ chỉnh hiệu ứng này cho phù hợp với tính thẩm mỹ của trang web.

Các bước triển khai

1. Chọn sử dụng hiệu ứng chuyển đổi khung hiển thị giữa các tài liệu

Cả trang nguồn và trang đích đều phải chọn sử dụng hiệu ứng chuyển đổi khung hiển thị để trình duyệt kích hoạt các hiệu ứng đó khi điều hướng.

/* Respect user's preference for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  /* Add to a global stylesheet shared by both pages */
  @view-transition {
    /* Enables transitions for same-origin navigations */
    navigation: auto;
  }
}

2. Tuỳ chỉnh ảnh động chuyển tiếp (Không bắt buộc)

Bạn có thể nhắm đến trạng thái cũ và mới của hiệu ứng chuyển đổi bằng cách sử dụng các phần tử giả để tạo hiệu ứng như trang trình bày hoặc hiển thị.

/* Customizing the outgoing page animation */
::view-transition-old(root) {
  /* Move the old page out to the left */
  animation: 0.4s ease-in both slide-out;
}

/* Customizing the incoming page animation */
::view-transition-new(root) {
  /* Move the new page in from the right */
  animation: 0.4s ease-out both slide-in;
}

@keyframes slide-out {
  to { transform: translateX(-20%); opacity: 0; }
}

@keyframes slide-in {
  from { transform: translateX(100%); }
}

3. Tạo hiệu ứng chuyển đổi có hướng (Không bắt buộc)

Bạn có thể muốn có các hiệu ứng chuyển đổi khác nhau tuỳ thuộc vào các trang mà bạn đang di chuyển giữa các trang. Ví dụ: khi chuyển từ trang chủ sang trang liên hệ, bạn có thể muốn hiệu ứng nội dung mới xuất hiện từ bên phải. Khi quay lại trang chủ, việc có cùng hiệu ứng sẽ không hợp lý.

Nếu trang bạn đang chuyển đến luôn có cùng một kiểu chuyển đổi, bất kể cách bạn truy cập vào trang, thì bạn có thể chỉ định kiểu chuyển đổi đó bằng types trong quy tắc @view-transition.

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
    /* Specify the types of view transitions that will always be used on this page. */
    types: previous;
  }
}

Bạn cũng có thể chỉ định có điều kiện các loại chuyển đổi bên trong trình nghe sự kiện cho pagereveal.

window.addEventListener("pagereveal", async (e) => {
  if (e.viewTransition && window.navigation?.activation) {
    // Use application-specific logic to compute a transition type
     const transitionType = yourTransitionTypeLogic(navigation.activation.from, navigation.activation.entry);
    e.viewTransition.types.add(transitionType);
  }
});

Sau đó, hãy sử dụng bộ chọn giả :active-view-transition-type() để áp dụng các ảnh động khác nhau cho từng loại.

:active-view-transition-type(next) {
  &::view-transition-old(root) {
    animation-name: slide-out-next;
  }

  &::view-transition-new(root) {
    animation-name: slide-in-next;
  }
}
:active-view-transition-type(previous) {
  &::view-transition-old(root) {
    animation-name: slide-out-previous;
  }

  &::view-transition-new(root) {
    animation-name: slide-in-previous;
  }
}

Chiến lược dự phòng

Nếu không hỗ trợ hiệu ứng chuyển đổi khung hiển thị hoặc hiệu ứng chuyển đổi khung hiển thị trên nhiều tài liệu, thì trình duyệt sẽ thực hiện thao tác điều hướng trang tức thì theo tiêu chuẩn. Hiệu ứng chuyển đổi khung hiển thị trên nhiều tài liệu là một tính năng cải tiến tăng dần; chức năng cốt lõi của trang web không bị ảnh hưởng.

Cách kiểm tra khả năng hỗ trợ trong JavaScript:

if ('onpagereveal' in window) {
  // Browser supports cross-document view transitions
}

Nếu trình duyệt không hỗ trợ Navigation API, bạn sẽ không thể sử dụng API này để xác định loại chuyển đổi. Sử dụng một phương thức thay thế để xác định loại chuyển đổi hoặc cung cấp loại chuyển đổi dự phòng. Nếu không, trình duyệt sẽ thực hiện thao tác điều hướng trang tức thì theo tiêu chuẩn.

Cách kiểm tra khả năng hỗ trợ trong JavaScript:

if (window.navigation?.activation) {
  // Browser supports the Navigation API
}