Chuyển đổi phần tử nhóm

Khi các mục được thêm hoặc xoá khỏi danh sách hoặc được sắp xếp lại, hiệu ứng chuyển đổi có thể giúp người dùng duy trì ngữ cảnh. Hiệu ứng chuyển đổi khung hiển thị giúp chuyển đổi giữa hai trạng thái của một phần tử bằng cách gán cho phần tử đó một view-transition-name duy nhất. Khi nhiều phần tử trên một trang có cùng hành vi chuyển đổi, view-transition-class cho phép bạn xác định logic đó một lần trong CSS thay vì lặp lại logic đó cho mỗi view-transition-name riêng biệt. Điều này giúp bạn duy trì biểu định kiểu trong khi vẫn đảm bảo ảnh động nhất quán trên một nhóm phần tử.

Các bước triển khai

1. Chỉ định tên riêng biệt và một lớp học được chia sẻ

   Mỗi phần tử cần được theo dõi riêng trong quá trình chuyển đổi phải có một view-transition-name riêng biệt.

   <!-- Mandatory: Each element must have a unique view-transition-name -->
   <li style="view-transition-name: item-1" class="item">Item 1</li>
   <li style="view-transition-name: item-2" class="item">Item 2</li>
   

   Để áp dụng kiểu dùng chung, hãy chỉ định cả view-transition-class.

   .item {
     view-transition-class: list-item;
   }
   

2. Xác định logic chuyển đổi dùng chung

   Sử dụng phần tử giả ::view-transition-group() với bộ chọn lớp để áp dụng kiểu cho tất cả thành viên của nhóm đó.

   /* Targets any view transition group that has the 'list-item' class */
   ::view-transition-group(.list-item) {
     animation-duration: 0.5s;
     animation-timing-function: ease-in-out;
   }
   
   /* Handle accessibility by respecting motion preferences */
   @media (prefers-reduced-motion: reduce) {
     /* Disable all group transitions, including the default `root` group. */
     ::view-transition-group(*),
     ::view-transition-old(*),
     ::view-transition-new(*) {
       animation: none !important;
     }
   }
   

3. Không bắt buộc: Xác định ảnh động vào cảnh và thoát cảnh

   Sử dụng bộ chọn :only-child để thêm hiệu ứng chuyển đổi cụ thể vào các phần tử được thêm hoặc xoá. Các phần tử giả ::view-transition-new() và ::view-transition-old() là phần tử con của phần tử giả ::view-transition-image-pair(), vì vậy, chúng ta có thể xác định đó là phần tử được thêm hay bị xoá nếu đó là phần tử con duy nhất.

   /* A `::view-transition-new()` element is the only child if it wasn't present before the view transition, so it is an added element. */
   ::view-transition-new(.list-item):only-child {
     animation-name: slide-in;
     /* Specify an animation duration if you want something different than the UA default of 0.5s */
     animation-duration: 1s;
   }
   /* A `::view-transition-old()` element is the only child if it isn't present after the view transition, so it is a removed element. */
   ::view-transition-old(.list-item):only-child {
     animation-name: slide-out;
     /* Specify an animation duration if you want something different than the UA default of 0.5s */
     animation-duration: 1s;
   }
   
   @keyframes slide-in {
     from {
       translate: -100vw 0;
     }
   }
   @keyframes slide-out {
     to {
       translate: -100vw 0;
     }
   }
   

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

   Gói nội dung cập nhật DOM trong document.startViewTransition(). Trình duyệt sẽ ghi lại trạng thái cũ, thực hiện cập nhật rồi tạo ảnh động cho trạng thái mới.

   function updateList(newData) {
     document.startViewTransition(() => {
       // All DOM changes inside this callback will be transitioned
       render(newData);
     });
   }
   

5. Duy trì khả năng tương tác của các phần tử không chuyển đổi

Hiệu ứng chuyển đổi khung hiển thị hoạt động bằng cách phủ ảnh chụp nhanh của các phần tử DOM, sau đó chuyển đổi ảnh chụp nhanh. Điều này có nghĩa là trong quá trình chuyển đổi, các phần tử không tương tác được. Nếu có các thành phần tương tác không được chuyển đổi, bạn có thể làm cho các thành phần đó có tính tương tác bằng cách tắt sự kiện chạm trong quá trình chuyển đổi khung hiển thị.

::view-transition {
  /* Non-transitioned elements below the view transitions remain interactive */
  pointer-events: none;
}

Ngoài ra, theo mặc định, phần tử :root có một hiệu ứng chuyển đổi khung hiển thị tên là root, cho phép hiệu ứng chuyển đổi toàn trang mặc định. Nếu không có thay đổi nào đối với phần tử gốc, thì đây sẽ là quá trình chuyển đổi giữa hai ảnh chụp nhanh giống hệt nhau và không tương tác. Vì chỉ chuyển đổi các phần tử cụ thể chứ không phải toàn bộ màn hình, nên chúng ta có thể tắt hiệu ứng chuyển đổi root.

:root {
  /* Disable the root transition because we are only transitioning specific elements. */
  view-transition-name: none;
}

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

Hiệu ứng chuyển đổi khung hiển thị là một tính năng cải tiến tăng dần. Nếu trình duyệt không hỗ trợ document.startViewTransition, thì quá trình cập nhật DOM vẫn sẽ diễn ra ngay lập tức, mang lại trải nghiệm hoạt động nhưng không có ảnh động.

if (document.startViewTransition) {
  document.startViewTransition(() => updateDOM());
} else {
  // Fallback: Perform the update without animation
  updateDOM();
}

Đối với CSS, các trình duyệt không nhận dạng được view-transition-class hoặc bộ chọn lớp ::view-transition-group() sẽ chỉ bỏ qua các quy tắc đó và không áp dụng ảnh động nào.