Chuyển đổi điều hướng có hướng

Ứng dụng trang đơn (SPA) mang lại giao diện điều hướng bằng cách thay thế nội dung của trang mà không cần chuyển đến trang mới. Theo mặc định, nội dung chỉ được thay thế mà không có hiệu ứng chuyển đổi nào. Hiệu ứng chuyển đổi có hướng có thể củng cố trực quan mối quan hệ không gian giữa các khung hiển thị.

Bằng cách trượt nội dung mới từ hướng mà người dùng đang di chuyển, bạn sẽ tạo một bản đồ tư duy về cấu trúc ứng dụng. Ví dụ: một trang web sản phẩm có thể cho thấy hiệu ứng chuyển đổi sang phải cho thao tác "tiến" và sang trái cho thao tác "lùi", hoặc một bản trình chiếu có thể chuyển đổi lên và xuống để cho thấy trang trình bày tiếp theo và trước đó.

Các bước triển khai

1. Phát hiện hướng điều hướng: Xác định xem người dùng đang di chuyển "tiến" hay "lùi" trong quy trình của ứng dụng. Cách bạn phát hiện hướng phụ thuộc vào trường hợp sử dụng của bạn.
2. Kích hoạt hiệu ứng chuyển đổi bằng các loại: Truyền hướng trong một mảng types đến document.startViewTransition() để phân loại hiệu ứng chuyển đổi.
3. Xác định ảnh động có hướng bằng CSS: Sử dụng lớp giả :active-view-transition-type() để áp dụng ảnh động cụ thể dựa trên loại điều hướng.

Xác định khung hình chính

Xác định ảnh động trượt đến và đi từ mỗi hướng. Để có hiệu suất tốt nhất, hãy tạo ảnh động cho các thay đổi về vị trí bằng thuộc tính transform hoặc các thuộc tính biến đổi riêng lẻ, scale, rotate và translate. opacity thường cũng có hiệu suất tốt, nhưng hãy tránh tạo ảnh động cho các thuộc tính CSS khác mà không xác minh trước rằng các thuộc tính đó không kích hoạt bố cục hoặc hiển thị.

/* Slide an element out to the left */
@keyframes slide-to-left {
  /* Mandatory: animate `transform` instead of inset properties for better performance. */
  to { transform: translateX(-100%); }
}

/* Slide an element in from the right */
@keyframes slide-from-right {
  from { transform: translateX(100%); }
}

/* Slide an element out to the right */
@keyframes slide-to-right {
  to { transform: translateX(100%); }
}

/* Slide an element in from the left */
@keyframes slide-from-left {
  from { transform: translateX(-100%); }
}

Thiết lập chế độ cài đặt ảnh động dùng chung

Sử dụng bộ chọn ::view-transition-group(root) để áp dụng các chế độ cài đặt ảnh động được dùng chung cho tất cả các hiệu ứng chuyển đổi.

::view-transition-group(root){
  animation: 0.4s ease-in-out both;
}

Áp dụng ảnh động có hướng

Sử dụng lớp giả active-view-transition-type để nhắm đến các khung hiển thị chuyển đổi cụ thể khi loại "chuyển tiếp" hoặc "quay lại" đang hoạt động.

/* MANDATORY: Apply forward animations when the 'forward' type is active */
html:active-view-transition-type(forward)::view-transition-old(root) {
  animation-name: slide-to-left;
}
html:active-view-transition-type(forward)::view-transition-new(root) {
  animation-name: slide-from-right;
}

/* MANDATORY: Apply backward animations when the 'backward' type is active */
html:active-view-transition-type(backward)::view-transition-old(root) {
  animation-name: slide-to-right;
}
html:active-view-transition-type(backward)::view-transition-new(root) {
  animation-name: slide-from-left;
}

Kích hoạt hiệu ứng chuyển đổi

Khi điều hướng, hãy truyền loại thích hợp đến phương thức startViewTransition.

const transitionType = yourTransitionTypeLogic();
const updateDOM = yourUpdateDOMLogic();

document.startViewTransition({
  update: updateDOM,
  types: [transitionType] // Matches the CSS :active-view-transition-type() selectors
});

Hỗ trợ tiếp cận

Luôn tôn trọng lựa chọn ưu tiên của người dùng về việc giảm chuyển động bằng cách tắt hoặc đơn giản hoá ảnh động.

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root) {
    animation: none !important;
  }
}

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

View Transitions API là một tính năng cải tiến tăng dần. Trong các trình duyệt không được hỗ trợ, document.startViewTransition sẽ là undefined. Bạn phải gói logic điều hướng trong một quy trình kiểm tra phát hiện tính năng để đảm bảo quá trình cập nhật DOM vẫn diễn ra ngay lập tức mà không có ảnh động, như minh hoạ trong hàm trợ giúp này.

/**
 * Navigates to a new view with a directional transition.
 * @param {Function} updateDOM - Callback to update the DOM state.
 * @param {string} direction - Either 'forward' or 'backward'.
 */
function navigate(updateDOM, direction) {
  // Feature detect for browsers that do not support View Transitions
  if (!document.startViewTransition) {
    updateDOM();
    return;
  }

  // Start transition with the specific navigation type
  document.startViewTransition({
    update: updateDOM,
    types: [direction] // Matches the CSS :active-view-transition-type() selectors
  });
}