Hiệu ứng chuyển đổi chế độ xem cùng tài liệu cho các ứng dụng trang đơn

Jake Archibald

Bramus

Ngày xuất bản: 17 tháng 8 năm 2021, Ngày cập nhật gần đây nhất: 25 tháng 9 năm 2024

Khi chuyển đổi chế độ xem chạy trên một tài liệu, nó được gọi là chuyển đổi chế độ xem cùng một tài liệu. Điều này thường xảy ra trong các ứng dụng trang đơn (SPA) trong đó JavaScript được sử dụng để cập nhật DOM. Kể từ Chrome 111, Chrome hỗ trợ các hiệu ứng chuyển đổi chế độ xem trong cùng một tài liệu.

Để kích hoạt quá trình chuyển đổi chế độ xem trong cùng một tài liệu, hãy 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());
}

Khi được gọi, trình duyệt sẽ tự động chụp nhanh tất cả các phần tử có thuộc tính CSS view-transition-name được khai báo trên đó.

Sau đó, hàm này thực thi lệnh gọi lại đã truyền để cập nhật DOM, sau đó sẽ chụp nhanh trạng thái mới.

Sau đó, các ảnh chụp nhanh này được sắp xếp trong một cây phần tử giả và tạo ảnh động bằng sức mạnh của ảnh động CSS. Các cặp ảnh chụp nhanh từ trạng thái cũ và mới chuyển đổi liền mạch từ vị trí và kích thước cũ sang vị trí mới, trong khi nội dung của chúng chuyển đổi hiệu ứng khuếch tán. Nếu muốn, bạn có thể sử dụng CSS để tuỳ chỉnh ảnh động.

Chế độ chuyển đổi mặc định: Mờ dần

Hiệu ứng chuyển đổi thành phần hiển thị mặc định là hiệu ứng chuyển đổi lồng ghép, vì vậy, đây là một phần giới thiệu hay về API:

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

Trong đó updateTheDOMSomehow thay đổi DOM thành trạng thái mới. Bạn có thể thực hiện theo bất kỳ cách nào bạn muốn. Ví dụ: bạn có thể thêm hoặc xoá các phần tử, thay đổi tên lớp hoặc thay đổi kiểu.

Và cứ như thế, các trang sẽ mờ dần:

Được rồi, hiệu ứng chuyển tiếp không ấn tượng lắm. Rất may là hiệu ứng chuyển cảnh có thể được tuỳ chỉnh, nhưng trước tiên, bạn cần hiểu cách hoạt động của hiệu ứng mờ dần cơ bản này.

Cách hoạt động của các hiệu ứng chuyển đổi này

Hãy cập nhật mã mẫu trước đó.

document.startViewTransition(() => updateTheDOMSomehow(data));

Khi .startViewTransition() được gọi, API sẽ ghi lại trạng thái hiện tại của trang. Quy trình này bao gồm cả việc chụp ảnh nhanh.

Sau khi hoàn tất, lệnh gọi lại đã chuyển đến .startViewTransition() sẽ được gọi. Đó là nơi DOM được thay đổi. Sau đó, API sẽ ghi lại trạng thái mới của trang.

Sau khi thu thập trạng thái mới, API sẽ tạo một cây phần tử giả như sau:

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

::view-transition nằm trong một lớp phủ, phủ lên mọi nội dung khác trên trang. Điều này rất hữu ích nếu bạn muốn đặt màu nền cho hiệu ứng chuyển đổi.

::view-transition-old(root) là ảnh chụp màn hình của thành phần hiển thị cũ và ::view-transition-new(root) là bản trình bày trực tiếp của thành phần hiển thị mới. Cả hai đều hiển thị dưới dạng "nội dung đã thay thế" CSS (như <img>).

Khung hiển thị cũ tạo ảnh động từ opacity: 1 thành opacity: 0, trong khi khung hiển thị mới tạo ảnh động từ opacity: 0 sang opacity: 1, tạo ra hiệu ứng mờ dần.

Tất cả ảnh động đều được thực hiện bằng cách sử dụng ảnh động CSS, vì vậy bạn có thể tùy chỉnh chúng bằng CSS.

Tuỳ chỉnh hiệu ứng chuyển đổi

Bạn có thể nhắm mục tiêu tất cả các phần tử giả chuyển đổi chế độ xem bằng CSS và vì các ảnh động được xác định bằng CSS nên bạn có thể sửa đổi chúng bằng cách sử dụng các thuộc tính ảnh động CSS hiện có. Ví dụ:

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 5s;
}

Với thay đổi đó, hiệu ứng mờ dần hiện rất chậm:

Được rồi, vẫn chưa ấn tượng. Thay vào đó, mã sau đây sẽ triển khai chuyển đổi trục chung của Material Design:

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes slide-from-right {
  from { transform: translateX(30px); }
}

@keyframes slide-to-left {
  to { transform: translateX(-30px); }
}

::view-transition-old(root) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

Và đây là kết quả:

Chuyển đổi nhiều phần tử

Trong bản minh hoạ trước, toàn bộ trang đều tham gia vào quá trình chuyển đổi trục dùng chung. Điều này hoạt động tốt cho hầu hết trang, nhưng có vẻ không phù hợp với tiêu đề vì tiêu đề sẽ trượt ra rồi trượt lại vào.

Để tránh điều này, bạn có thể trích xuất tiêu đề khỏi phần còn lại của trang để có thể tạo ảnh động riêng cho tiêu đề. Bạn có thể thực hiện việc này bằng cách chỉ định view-transition-name cho phần tử.

.main-header {
  view-transition-name: main-header;
}

Giá trị của view-transition-name có thể là bất kỳ giá trị nào bạn muốn (ngoại trừ none, nghĩa là không có tên chuyển đổi). Thuộc tính này dùng để xác định duy nhất từng phần tử trong quá trình chuyển đổi.

Và kết quả là:

Giờ đây, tiêu đề vẫn ở đúng vị trí và mờ dần.

Nội dung khai báo CSS đó đã khiến cây phần tử giả thay đổi:

::view-transition
├─ ::view-transition-group(root)
│  └─ ::view-transition-image-pair(root)
│     ├─ ::view-transition-old(root)
│     └─ ::view-transition-new(root)
└─ ::view-transition-group(main-header)
   └─ ::view-transition-image-pair(main-header)
      ├─ ::view-transition-old(main-header)
      └─ ::view-transition-new(main-header)

Hiện có hai nhóm chuyển đổi. Một cho tiêu đề và một cho phần còn lại. Bạn có thể nhắm mục tiêu các thành phần này một cách độc lập bằng CSS và cung cấp các hiệu ứng chuyển đổi khác nhau. Tuy nhiên, trong trường hợp này, main-header vẫn được giữ lại hiệu ứng chuyển đổi mặc định là hiệu ứng chuyển đổi lồng ghép.

Được rồi, hiệu ứng chuyển đổi mặc định không chỉ là hiệu ứng chuyển đổi lồng ghép, ::view-transition-group cũng chuyển đổi:

• Xác định vị trí và biến đổi (sử dụng transform)
• Chiều rộng
• Chiều cao

Điều đó cho đến bây giờ vẫn chưa quan trọng, vì tiêu đề có cùng kích thước và định vị cả hai bên của sự thay đổi DOM. Tuy nhiên, bạn cũng có thể trích xuất văn bản trong tiêu đề:

.main-header-text {
  view-transition-name: main-header-text;
  width: fit-content;
}

fit-content được dùng để phần tử là kích thước của văn bản, thay vì kéo dài đến chiều rộng còn lại. Nếu không thực hiện điều này, mũi tên quay lại sẽ giảm kích thước của phần tử văn bản tiêu đề thay vì cùng kích thước ở cả hai trang.

Vậy là giờ đây, chúng ta có 3 phần để thao tác:

::view-transition
├─ ::view-transition-group(root)
│  └─ …
├─ ::view-transition-group(main-header)
│  └─ …
└─ ::view-transition-group(main-header-text)
   └─ …

Nhưng xin nhắc lại, vẫn giữ nguyên các chế độ mặc định:

Bây giờ, văn bản tiêu đề sẽ trượt một chút để tạo không gian cho nút quay lại.

Tạo ảnh động cho nhiều phần tử giả lập theo cùng một cách bằng view-transition-class

Giả sử bạn có hiệu ứng chuyển đổi chế độ xem bằng một loạt thẻ và một tiêu đề trên trang. Để tạo ảnh động cho tất cả các thẻ ngoại trừ tiêu đề, bạn phải viết một bộ chọn nhắm đến từng thẻ riêng lẻ.

h1 {
    view-transition-name: title;
}
::view-transition-group(title) {
    animation-timing-function: ease-in-out;
}

#card1 { view-transition-name: card1; }
#card2 { view-transition-name: card2; }
#card3 { view-transition-name: card3; }
#card4 { view-transition-name: card4; }
…
#card20 { view-transition-name: card20; }

::view-transition-group(card1),
::view-transition-group(card2),
::view-transition-group(card3),
::view-transition-group(card4),
…
::view-transition-group(card20) {
    animation-timing-function: var(--bounce);
}

Bạn có 20 phần tử? Đó là 20 bộ chọn bạn cần viết. Thêm phần tử mới? Sau đó, bạn cũng cần mở rộng bộ chọn áp dụng các kiểu ảnh động. Không thể mở rộng chính xác.

Bạn có thể sử dụng view-transition-class trong các phần tử giả lập chuyển đổi thành phần hiển thị để áp dụng cùng một quy tắc kiểu.

#card1 { view-transition-name: card1; }
#card2 { view-transition-name: card2; }
#card3 { view-transition-name: card3; }
#card4 { view-transition-name: card4; }
#card5 { view-transition-name: card5; }
…
#card20 { view-transition-name: card20; }

#cards-wrapper > div {
  view-transition-class: card;
}
html::view-transition-group(.card) {
  animation-timing-function: var(--bounce);
}

Ví dụ về các thẻ sau đây tận dụng đoạn mã CSS trước đó. Tất cả các thẻ (bao gồm cả những thẻ mới thêm) đều được áp dụng cùng một thời gian bằng một bộ chọn: html::view-transition-group(.card).

Chuyển đổi gỡ lỗi

Vì hiệu ứng chuyển đổi khung hiển thị được xây dựng dựa trên ảnh động CSS, nên bảng điều khiển Animations (Ảnh động) trong Công cụ dành cho nhà phát triển của Chrome rất phù hợp để gỡ lỗi hiệu ứng chuyển đổi.

Khi sử dụng bảng điều khiển Animations, bạn có thể tạm dừng ảnh động tiếp theo rồi tua qua lại qua ảnh động đó. Trong thời gian này, bạn có thể tìm thấy các phần tử giả lập chuyển đổi trong bảng điều khiển Elements (Thành phần).

Các phần tử chuyển đổi không cần phải là cùng một phần tử DOM

Cho đến nay, chúng ta đã sử dụng view-transition-name để tạo các phần tử chuyển đổi riêng biệt cho tiêu đề và văn bản trong phần đầu. Về mặt lý thuyết, đây là cùng một phần tử trước và sau khi DOM thay đổi, nhưng bạn có thể tạo hiệu ứng chuyển đổi khi không phải như vậy.

Ví dụ: bạn có thể cung cấp view-transition-name cho video nhúng chính:

.full-embed {
  view-transition-name: full-embed;
}

Sau đó, khi người dùng nhấp vào hình thu nhỏ, bạn có thể cung cấp cùng một view-transition-name, chỉ trong suốt thời gian chuyển đổi:

thumbnail.onclick = async () => {
  thumbnail.style.viewTransitionName = 'full-embed';

  document.startViewTransition(() => {
    thumbnail.style.viewTransitionName = '';
    updateTheDOMSomehow();
  });
};

Và kết quả:

Hình thu nhỏ hiện chuyển đổi thành hình ảnh chính. Mặc dù về mặt lý thuyết (và theo nghĩa đen) các phần tử này là những phần tử khác nhau, nhưng API chuyển đổi coi các phần tử này là như nhau vì chúng dùng chung một view-transition-name.

Mã thực tế cho hiệu ứng chuyển đổi này phức tạp hơn một chút so với ví dụ trước, vì mã này cũng xử lý hiệu ứng chuyển đổi trở lại trang hình thu nhỏ. Xem nguồn để biết cách triển khai đầy đủ.

Hiệu ứng chuyển đổi tuỳ chỉnh khi vào và thoát

Hãy xem ví dụ sau:

Thanh bên là một phần của quá trình chuyển đổi:

.sidebar {
  view-transition-name: sidebar;
}

Nhưng, không giống như tiêu đề trong ví dụ trước, thanh bên không xuất hiện trên tất cả các trang. Nếu cả hai trạng thái đều có thanh bên, thì các phần tử giả lập chuyển đổi sẽ có dạng như sau:

::view-transition
├─ …other transition groups…
└─ ::view-transition-group(sidebar)
   └─ ::view-transition-image-pair(sidebar)
      ├─ ::view-transition-old(sidebar)
      └─ ::view-transition-new(sidebar)

Tuy nhiên, nếu thanh bên chỉ nằm trên trang mới, thì phần tử giả ::view-transition-old(sidebar) sẽ không xuất hiện. Vì không có hình ảnh "cũ" cho thanh bên, nên cặp hình ảnh sẽ chỉ có ::view-transition-new(sidebar). Tương tự, nếu thanh bên chỉ nằm trên trang cũ, thì cặp hình ảnh sẽ chỉ có ::view-transition-old(sidebar).

Trong bản minh hoạ trước, thanh bên chuyển đổi sẽ khác nhau tuỳ thuộc vào việc thanh bên đang vào, thoát hay hiện ở cả hai trạng thái. Cửa sổ này sẽ xuất hiện bằng cách trượt từ bên phải và mờ dần, thoát bằng cách trượt sang bên phải và mờ dần, đồng thời giữ nguyên vị trí khi xuất hiện ở cả hai trạng thái.

Để tạo các chuyển đổi nhập và thoát cụ thể, bạn có thể sử dụng lớp giả :only-child để nhắm mục tiêu các phần tử giả cũ hoặc mới khi đó là phần tử con duy nhất trong cặp hình ảnh:

/* Entry transition */
::view-transition-new(sidebar):only-child {
  animation: 300ms cubic-bezier(0, 0, 0.2, 1) both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

/* Exit transition */
::view-transition-old(sidebar):only-child {
  animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}

Trong trường hợp này, không có quá trình chuyển đổi cụ thể nào khi thanh bên xuất hiện ở cả hai trạng thái, vì trạng thái mặc định là hoàn hảo.

Cập nhật DOM không đồng bộ và chờ nội dung

Lệnh gọi lại được truyền đến .startViewTransition() có thể trả về một hứa hẹn, cho phép cập nhật DOM không đồng bộ và chờ nội dung quan trọng sẵn sàng.

document.startViewTransition(async () => {
  await something;
  await updateTheDOMSomehow();
  await somethingElse;
});

Quá trình chuyển đổi sẽ không bắt đầu cho đến khi lời hứa được thực hiện. Trong thời gian này, trang bị đóng băng, vì vậy bạn nên giảm thiểu độ trễ ở đây. Cụ thể, bạn nên thực hiện tìm nạp mạng trước khi gọi .startViewTransition(), trong khi trang vẫn hoàn toàn có tính tương tác, thay vì tìm nạp như một phần của lệnh gọi lại .startViewTransition().

Nếu bạn quyết định chờ hình ảnh hoặc phông chữ sẵn sàng, hãy nhớ sử dụng thời gian chờ mạnh mẽ:

const wait = ms => new Promise(r => setTimeout(r, ms));

document.startViewTransition(async () => {
  updateTheDOMSomehow();

  // Pause for up to 100ms for fonts to be ready:
  await Promise.race([document.fonts.ready, wait(100)]);
});

Tuy nhiên, trong một số trường hợp, tốt hơn hết bạn nên tránh tình trạng trễ và sử dụng nội dung hiện có.

Khai thác tối đa nội dung bạn đã có

Trong trường hợp hình thu nhỏ chuyển đổi sang hình ảnh lớn hơn:

Hiệu ứng chuyển đổi mặc định là làm mờ chéo, có nghĩa là hình thu nhỏ có thể bị mờ đi với hình ảnh đầy đủ chưa được tải.

Một cách để xử lý vấn đề này là đợi hình ảnh tải xong trước khi bắt đầu chuyển đổi. Tốt nhất là bạn nên thực hiện việc này trước khi gọi .startViewTransition() để trang vẫn có thể tương tác và có thể hiển thị một vòng quay để cho người dùng biết rằng mọi thứ đang tải. Nhưng trong trường hợp này, có một cách tốt hơn:

::view-transition-old(full-embed),
::view-transition-new(full-embed) {
  /* Prevent the default animation,
  so both views remain opacity:1 throughout the transition */
  animation: none;
  /* Use normal blending,
  so the new view sits on top and obscures the old view */
  mix-blend-mode: normal;
}

Giờ đây, hình thu nhỏ không bị mờ đi mà chỉ hiển thị bên dưới hình ảnh đầy đủ. Điều này có nghĩa là nếu chế độ xem mới chưa tải, thì hình thu nhỏ sẽ hiển thị trong suốt quá trình chuyển đổi. Điều này có nghĩa là quá trình chuyển đổi có thể bắt đầu ngay lập tức và hình ảnh đầy đủ có thể tải trong thời gian riêng.

Cách này sẽ không hoạt động nếu thành phần hiển thị mới có tính chất trong suốt, nhưng trong trường hợp này, chúng ta biết rằng thành phần hiển thị đó không có tính chất trong suốt, vì vậy, chúng ta có thể thực hiện việc tối ưu hoá này.

Xử lý các thay đổi về tỷ lệ khung hình

Điểm thuận tiện là tất cả các hiệu ứng chuyển đổi cho đến thời điểm này đều thực hiện cho các phần tử có cùng tỷ lệ khung hình, nhưng không phải lúc nào cũng đúng. Nếu hình thu nhỏ là 1:1 và hình ảnh chính là 16:9 thì sao?

Trong hiệu ứng chuyển đổi mặc định, nhóm sẽ tạo ảnh động từ kích thước trước đó sang kích thước sau đó. Chế độ xem cũ và mới có chiều rộng 100% của nhóm và chiều cao tự động, nghĩa là các chế độ xem này giữ nguyên tỷ lệ khung hình bất kể kích thước của nhóm.

Đây là giá trị mặc định phù hợp, nhưng không phải là giá trị mong muốn trong trường hợp này. Do đó:

::view-transition-old(full-embed),
::view-transition-new(full-embed) {
  /* Prevent the default animation,
  so both views remain opacity:1 throughout the transition */
  animation: none;
  /* Use normal blending,
  so the new view sits on top and obscures the old view */
  mix-blend-mode: normal;
  /* Make the height the same as the group,
  meaning the view size might not match its aspect-ratio. */
  height: 100%;
  /* Clip any overflow of the view */
  overflow: clip;
}

/* The old view is the thumbnail */
::view-transition-old(full-embed) {
  /* Maintain the aspect ratio of the view,
  by shrinking it to fit within the bounds of the element */
  object-fit: contain;
}

/* The new view is the full image */
::view-transition-new(full-embed) {
  /* Maintain the aspect ratio of the view,
  by growing it to cover the bounds of the element */
  object-fit: cover;
}

Điều này có nghĩa là hình thu nhỏ vẫn nằm ở giữa phần tử khi chiều rộng mở rộng, nhưng hình ảnh đầy đủ sẽ "không bị cắt" khi chuyển đổi từ tỷ lệ 1:1 sang 16:9.

Để biết thêm thông tin chi tiết, hãy xem bài viết Chuyển đổi chế độ xem: Xử lý các thay đổi về tỷ lệ khung hình

Sử dụng truy vấn nội dung nghe nhìn để thay đổi hiệu ứng chuyển đổi cho các trạng thái thiết bị

Bạn có thể muốn sử dụng các hiệu ứng chuyển đổi khác nhau trên thiết bị di động so với máy tính, chẳng hạn như ví dụ sau đây thực hiện một hiệu ứng trượt toàn bộ từ bên cạnh trên thiết bị di động, nhưng trượt một cách tinh tế hơn trên máy tính:

Bạn có thể thực hiện việc này bằng cách sử dụng các truy vấn nội dung nghe nhìn thông thường:

/* Transitions for mobile */
::view-transition-old(root) {
  animation: 300ms ease-out both full-slide-to-left;
}

::view-transition-new(root) {
  animation: 300ms ease-out both full-slide-from-right;
}

@media (min-width: 500px) {
  /* Overrides for larger displays.
  This is the shared axis transition from earlier in the article. */
  ::view-transition-old(root) {
    animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
      300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
  }

  ::view-transition-new(root) {
    animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
      300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
  }
}

Bạn cũng có thể muốn thay đổi phần tử mà bạn chỉ định view-transition-name tuỳ thuộc vào các truy vấn nội dung nghe nhìn trùng khớp.

Phản ứng với "chuyển động rút gọn" lựa chọn ưu tiên

Người dùng có thể cho biết họ muốn giảm chuyển động thông qua hệ điều hành và lựa chọn ưu tiên đó sẽ hiển thị trong CSS.

Bạn có thể chọn không cho phép những người dùng này chuyển đổi:

@media (prefers-reduced-motion) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

Tuy nhiên, người dùng ưu tiên "chuyển động rút gọn" không có nghĩa là người dùng không muốn chuyển động. Thay vì đoạn mã trước, bạn có thể chọn một ảnh động tinh tế hơn nhưng vẫn thể hiện mối quan hệ giữa các phần tử và luồng dữ liệu.

Xử lý nhiều kiểu chuyển đổi khung hiển thị bằng các kiểu chuyển đổi khung hiển thị

Đôi khi, quá trình chuyển đổi từ một thành phần hiển thị cụ thể sang một thành phần hiển thị khác phải có quá trình chuyển đổi được điều chỉnh riêng. Ví dụ: khi chuyển sang trang tiếp theo hoặc trang trước trong trình tự phân trang, bạn có thể trượt nội dung theo một hướng khác tuỳ thuộc vào việc bạn đang chuyển đến trang cao hơn hay trang thấp hơn so với trình tự.

Để làm việc này, bạn có thể sử dụng các loại chuyển đổi khung hiển thị. Các loại này cho phép bạn chỉ định một hoặc nhiều loại cho một chuyển đổi khung hiển thị đang hoạt động. Ví dụ: khi chuyển sang trang cao hơn trong trình tự phân trang, hãy sử dụng loại forwards và khi chuyển sang trang thấp hơn, hãy sử dụng loại backwards. Các loại này chỉ hoạt động khi chụp hoặc thực hiện hiệu ứng chuyển đổi và bạn có thể tuỳ chỉnh mỗi loại thông qua CSS để sử dụng các ảnh động khác nhau.

Để sử dụng các loại trong một lượt chuyển đổi chế độ xem cùng một tài liệu, bạn truyền types vào phương thức startViewTransition. Để cho phép việc này, document.startViewTransition cũng chấp nhận một đối tượng: update là hàm gọi lại cập nhật DOM và types là một mảng có các loại.

const direction = determineBackwardsOrForwards();

const t = document.startViewTransition({
  update: updateTheDOMSomehow,
  types: ['slide', direction],
});

Để phản hồi các loại này, hãy sử dụng bộ chọn :active-view-transition-type(). Truyền type mà bạn muốn nhắm đến vào bộ chọn. Điều này cho phép bạn tách biệt các kiểu của nhiều lượt chuyển đổi khung hiển thị mà không cần khai báo một lượt chuyển đổi khung hiển thị ảnh hưởng đến khai báo của một lượt chuyển đổi khung hiển thị khác.

Vì các loại chỉ áp dụng khi chụp hoặc thực hiện hiệu ứng chuyển đổi, nên bạn có thể dùng bộ chọn để đặt (hoặc bỏ thiết lập) view-transition-name trên một phần tử chỉ dành cho chuyển đổi chế độ xem với loại đó.

/* Determine what gets captured when the type is forwards or backwards */
html:active-view-transition-type(forwards, backwards) {
  :root {
    view-transition-name: none;
  }
  article {
    view-transition-name: content;
  }
  .pagination {
    view-transition-name: pagination;
  }
}

/* Animation styles for forwards type only */
html:active-view-transition-type(forwards) {
  &::view-transition-old(content) {
    animation-name: slide-out-to-left;
  }
  &::view-transition-new(content) {
    animation-name: slide-in-from-right;
  }
}

/* Animation styles for backwards type only */
html:active-view-transition-type(backwards) {
  &::view-transition-old(content) {
    animation-name: slide-out-to-right;
  }
  &::view-transition-new(content) {
    animation-name: slide-in-from-left;
  }
}

/* Animation styles for reload type only (using the default root snapshot) */
html:active-view-transition-type(reload) {
  &::view-transition-old(root) {
    animation-name: fade-out, scale-down;
  }
  &::view-transition-new(root) {
    animation-delay: 0.25s;
    animation-name: fade-in, scale-up;
  }
}

Trong bản minh hoạ phân trang sau, nội dung trang trượt tiến hoặc lùi dựa trên số trang mà bạn đang truy cập. Các kiểu này được xác định khi lượt nhấp mà chúng được chuyển vào document.startViewTransition.

Để nhắm đến mọi lượt chuyển đổi chế độ xem đang hoạt động, bất kể là loại nào, bạn đều có thể sử dụng bộ chọn lớp giả :active-view-transition.

html:active-view-transition {
    …
}

Xử lý nhiều kiểu chuyển đổi chế độ xem bằng tên lớp trên gốc chuyển đổi chế độ xem

Đôi khi, quá trình chuyển đổi từ một kiểu xem cụ thể sang một kiểu xem khác cần có sự chuyển đổi được thiết kế riêng. Hoặc thao tác điều hướng "quay lại" phải khác với thao tác điều hướng "tiến lên".

Trước khi các loại chuyển đổi, cách xử lý các trường hợp này là tạm thời đặt tên lớp trên gốc chuyển đổi. Khi gọi document.startViewTransition, phần tử gốc chuyển đổi này là phần tử <html>, có thể truy cập bằng document.documentElement trong JavaScript:

if (isBackNavigation) {
  document.documentElement.classList.add('back-transition');
}

const transition = document.startViewTransition(() =>
  updateTheDOMSomehow(data)
);

try {
  await transition.finished;
} finally {
  document.documentElement.classList.remove('back-transition');
}

Để xoá các lớp sau khi quá trình chuyển đổi kết thúc, ví dụ này sử dụng transition.finished. Đây là một lời hứa sẽ phân giải sau khi quá trình chuyển đổi đạt đến trạng thái kết thúc. Các thuộc tính khác của đối tượng này được đề cập trong tài liệu tham khảo API.

Bây giờ, bạn có thể sử dụng tên lớp đó trong CSS để thay đổi hiệu ứng chuyển đổi:

/* 'Forward' transitions */
::view-transition-old(root) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in, 300ms
      cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

/* Overrides for 'back' transitions */
.back-transition::view-transition-old(root) {
  animation-name: fade-out, slide-to-right;
}

.back-transition::view-transition-new(root) {
  animation-name: fade-in, slide-from-left;
}

Tương tự như các truy vấn nội dung đa phương tiện, bạn cũng có thể sử dụng các lớp này để thay đổi việc phần tử nào nhận được view-transition-name.

Chạy hiệu ứng chuyển đổi mà không làm ảnh động khác bị treo

Hãy tham khảo phần minh hoạ sau về vị trí chuyển đổi video:

Bạn có thấy vấn đề gì không? Đừng lo lắng nếu bạn không làm như vậy. Ở đây, tốc độ chậm lại:

Trong quá trình chuyển đổi, video có vẻ như bị treo, sau đó phiên bản phát của video sẽ mờ dần. Nguyên nhân là do ::view-transition-old(video) là ảnh chụp màn hình của thành phần hiển thị cũ, trong khi ::view-transition-new(video) là ảnh trực tiếp của thành phần hiển thị mới.

Bạn có thể khắc phục vấn đề này, nhưng trước tiên, hãy tự hỏi xem có đáng sửa hay không. Nếu bạn không thấy "vấn đề" khi quá trình chuyển đổi đang diễn ra ở tốc độ bình thường, tôi không muốn thay đổi nó.

Nếu bạn thực sự muốn khắc phục vấn đề này, đừng hiển thị ::view-transition-old(video); hãy chuyển thẳng sang ::view-transition-new(video). Bạn có thể thực hiện việc này bằng cách ghi đè các kiểu và ảnh động mặc định:

::view-transition-old(video) {
  /* Don't show the frozen old view */
  display: none;
}

::view-transition-new(video) {
  /* Don't fade the new view in */
  animation: none;
}

Chỉ vậy thôi!

Giờ đây, video sẽ phát trong suốt quá trình chuyển đổi.

Tích hợp với Navigation API (và các khung khác)

Các hiệu ứng chuyển đổi khung hiển thị được chỉ định theo cách có thể tích hợp với các khung hoặc thư viện khác. Ví dụ: nếu ứng dụng trang đơn (SPA) của bạn đang sử dụng bộ định tuyến, thì bạn có thể điều chỉnh cơ chế cập nhật của bộ định tuyến để cập nhật nội dung bằng cách sử dụng hiệu ứng chuyển đổi khung hiển thị.

Trong đoạn mã sau đây (lấy từ bản minh hoạ phân trang này), trình xử lý chặn của API Điều hướng được điều chỉnh để gọi document.startViewTransition khi hiệu ứng chuyển đổi chế độ xem được hỗ trợ.

navigation.addEventListener("navigate", (e) => {
    // Don't intercept if not needed
    if (shouldNotIntercept(e)) return;

    // Intercept the navigation
    e.intercept({
        handler: async () => {
            // Fetch the new content
            const newContent = await fetchNewContent(e.destination.url, {
                signal: e.signal,
            });

            // The UA does not support View Transitions, or the UA
            // already provided a Visual Transition by itself (e.g. swipe back).
            // In either case, update the DOM directly
            if (!document.startViewTransition || e.hasUAVisualTransition) {
                setContent(newContent);
                return;
            }

            // Update the content using a View Transition
            const t = document.startViewTransition(() => {
                setContent(newContent);
            });
        }
    });
});

Một số trình duyệt (nhưng không phải tất cả) cung cấp hiệu ứng chuyển đổi riêng khi người dùng thực hiện cử chỉ vuốt để điều hướng. Trong trường hợp đó, bạn không nên kích hoạt quá trình chuyển đổi khung hiển thị của riêng mình vì điều này sẽ dẫn đến trải nghiệm người dùng kém hoặc gây nhầm lẫn. Người dùng sẽ thấy hai hiệu ứng chuyển đổi (một do trình duyệt cung cấp và một do bạn cung cấp) chạy liên tiếp.

Do đó, bạn nên ngăn quá trình chuyển đổi thành phần hiển thị bắt đầu khi trình duyệt đã cung cấp quá trình chuyển đổi hình ảnh riêng. Để thực hiện việc này, hãy kiểm tra giá trị thuộc tính hasUAVisualTransition của thực thể NavigateEvent. Thuộc tính này được đặt thành true khi trình duyệt đã cung cấp hiệu ứng chuyển đổi hình ảnh. Thuộc tính hasUIVisualTransition này cũng tồn tại trên các thực thể PopStateEvent.

Trong đoạn mã trước, việc kiểm tra xác định liệu có cần chạy chuyển đổi chế độ xem có xem xét thuộc tính này hay không. Khi không hỗ trợ chuyển đổi chế độ xem trong cùng một tài liệu hoặc khi trình duyệt đã cung cấp chuyển đổi riêng, thì chuyển đổi chế độ xem sẽ bị bỏ qua.

if (!document.startViewTransition || e.hasUAVisualTransition) {
  setContent(newContent);
  return;
}

Trong bản ghi sau, người dùng vuốt để quay lại trang trước. Ảnh chụp bên trái không bao gồm bước kiểm tra cờ hasUAVisualTransition. Bản ghi bên phải không bao gồm dấu kiểm, do đó bỏ qua chuyển đổi chế độ xem thủ công do trình duyệt đã cung cấp chuyển đổi hình ảnh.

Tạo ảnh động bằng JavaScript

Cho đến nay, tất cả các quá trình chuyển đổi đã được xác định bằng cách sử dụng CSS, nhưng đôi khi CSS là không đủ:

Quá trình chuyển đổi này sẽ không thể đạt được nếu chỉ dùng CSS:

• Ảnh động bắt đầu từ vị trí nhấp.
• Ảnh động kết thúc bằng vòng tròn có bán kính đến góc xa nhất. Mặc dù, tôi hy vọng điều này sẽ khả thi với CSS trong tương lai.

Rất may là bạn có thể tạo hiệu ứng chuyển đổi bằng API Ảnh động trên web!

let lastClick;
addEventListener('click', event => (lastClick = event));

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // Get the click position, or fallback to the middle of the screen
  const x = lastClick?.clientX ?? innerWidth / 2;
  const y = lastClick?.clientY ?? innerHeight / 2;
  // Get the distance to the furthest corner
  const endRadius = Math.hypot(
    Math.max(x, innerWidth - x),
    Math.max(y, innerHeight - y)
  );

  // With a transition:
  const transition = document.startViewTransition(() => {
    updateTheDOMSomehow(data);
  });

  // Wait for the pseudo-elements to be created:
  transition.ready.then(() => {
    // Animate the root's new view
    document.documentElement.animate(
      {
        clipPath: [
          `circle(0 at ${x}px ${y}px)`,
          `circle(${endRadius}px at ${x}px ${y}px)`,
        ],
      },
      {
        duration: 500,
        easing: 'ease-in',
        // Specify which pseudo-element to animate
        pseudoElement: '::view-transition-new(root)',
      }
    );
  });
}

Ví dụ này sử dụng transition.ready, một lời hứa sẽ phân giải sau khi các phần tử giả chuyển đổi được tạo thành công. Các thuộc tính khác của đối tượng này được đề cập trong tài liệu tham khảo API.

Hiệu ứng chuyển đổi dưới dạng tính năng nâng cao

API Chuyển đổi thành phần hiển thị được thiết kế để "gói" một thay đổi DOM và tạo một chuyển đổi cho thay đổi đó. Tuy nhiên, quá trình chuyển đổi sẽ được coi là một sự nâng cao, vì trong trường hợp ứng dụng của bạn không được nhập "lỗi" trạng thái nếu thay đổi DOM thành công nhưng chuyển đổi không thành công. Lý tưởng nhất là quá trình chuyển đổi không thành công. Tuy nhiên, nếu có, quá trình chuyển đổi sẽ không ảnh hưởng đến trải nghiệm người dùng còn lại.

Để coi các lượt chuyển đổi là tính năng nâng cao, hãy chú ý không sử dụng các hứa hẹn chuyển đổi theo cách có thể khiến ứng dụng gửi đi nếu quá trình chuyển đổi không thành công.

async function switchView(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    await updateTheDOM(data);
    return;
  }

  const transition = document.startViewTransition(async () => {
    await updateTheDOM(data);
  });

  await transition.ready;

  document.documentElement.animate(
    {
      clipPath: [`inset(50%)`, `inset(0)`],
    },
    {
      duration: 500,
      easing: 'ease-in',
      pseudoElement: '::view-transition-new(root)',
    }
  );
}

Vấn đề với ví dụ này là switchView() sẽ từ chối nếu quá trình chuyển đổi không thể đạt đến trạng thái ready, nhưng điều đó không có nghĩa là thành phần hiển thị không chuyển đổi được. DOM có thể đã được cập nhật thành công, nhưng có view-transition-name trùng lặp, vì vậy chuyển đổi đã bị bỏ qua.

Thay vào đó:

async function switchView(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    await updateTheDOM(data);
    return;
  }

  const transition = document.startViewTransition(async () => {
    await updateTheDOM(data);
  });

  animateFromMiddle(transition);

  await transition.updateCallbackDone;
}

async function animateFromMiddle(transition) {
  try {
    await transition.ready;

    document.documentElement.animate(
      {
        clipPath: [`inset(50%)`, `inset(0)`],
      },
      {
        duration: 500,
        easing: 'ease-in',
        pseudoElement: '::view-transition-new(root)',
      }
    );
  } catch (err) {
    // You might want to log this error, but it shouldn't break the app
  }
}

Ví dụ này sử dụng transition.updateCallbackDone để chờ cập nhật DOM và từ chối nếu không thành công. switchView không còn từ chối nếu quá trình chuyển đổi không thành công, mà sẽ phân giải khi quá trình cập nhật DOM hoàn tất và từ chối nếu quá trình này không thành công.

Nếu bạn muốn switchView phân giải khi khung hiển thị mới đã "đã giải quyết", chẳng hạn như mọi quá trình chuyển đổi ảnh động đã hoàn tất hoặc bỏ qua cho đến cuối, hãy thay thế transition.updateCallbackDone bằng transition.finished.

Đây không phải là một đoạn mã polyfill, nhưng...

Đây không phải là một tính năng dễ dàng để polyfill. Tuy nhiên, chức năng trợ giúp này giúp mọi việc dễ dàng hơn nhiều trong các trình duyệt không hỗ trợ chuyển đổi khung hiển thị:

function transitionHelper({
  skipTransition = false,
  types = [],
  update,
}) {

  const unsupported = (error) => {
    const updateCallbackDone = Promise.resolve(update()).then(() => {});

    return {
      ready: Promise.reject(Error(error)),
      updateCallbackDone,
      finished: updateCallbackDone,
      skipTransition: () => {},
      types,
    };
  }

  if (skipTransition || !document.startViewTransition) {
    return unsupported('View Transitions are not supported in this browser');
  }

  try {
    const transition = document.startViewTransition({
      update,
      types,
    });

    return transition;
  } catch (e) {
    return unsupported('View Transitions with types are not supported in this browser');
  }
}

Bạn có thể sử dụng hàm này như sau:

function spaNavigate(data) {
  const types = isBackNavigation ? ['back-transition'] : [];

  const transition = transitionHelper({
    update() {
      updateTheDOMSomehow(data);
    },
    types,
  });

  // …
}

Trong các trình duyệt không hỗ trợ hiệu ứng chuyển đổi khung hiển thị, updateDOM vẫn sẽ được gọi nhưng sẽ không có hiệu ứng chuyển đổi dạng ảnh động.

Bạn cũng có thể cung cấp một số classNames để thêm vào <html> trong quá trình chuyển đổi, giúp bạn dễ dàng thay đổi quá trình chuyển đổi tuỳ thuộc vào loại điều hướng.

Bạn cũng có thể truyền true đến skipTransition nếu không muốn có ảnh động, ngay cả trong các trình duyệt hỗ trợ hiệu ứng chuyển đổi chế độ xem. Điều này rất hữu ích nếu trang web của bạn có lựa chọn ưu tiên của người dùng để tắt hiệu ứng chuyển đổi.

Cách dùng khung

Nếu bạn đang làm việc với một thư viện hoặc khung có loại bỏ các thay đổi của DOM, thì phần khó khăn là phải biết khi nào thay đổi DOM hoàn tất. Dưới đây là một bộ ví dụ sử dụng trình trợ giúp ở trên trong nhiều khung.

• React – khoá ở đây là flushSync, áp dụng đồng bộ một tập hợp các thay đổi trạng thái. Có, có một cảnh báo lớn về việc sử dụng API đó, nhưng Dan Abramov đảm bảo với tôi rằng việc này là phù hợp trong trường hợp này. Như thường lệ với mã React và không đồng bộ, khi sử dụng nhiều hứa hẹn do startViewTransition trả về, hãy đảm bảo rằng mã của bạn đang chạy ở trạng thái chính xác.
• Vue.js – khoá ở đây là nextTick, sẽ thực hiện sau khi DOM được cập nhật.
• Svelte – rất giống với Vue, nhưng phương thức để chờ thay đổi tiếp theo là tick.
• Lit – yếu tố chính ở đây là lời hứa this.updateComplete trong các thành phần, lời hứa này sẽ thực hiện sau khi DOM được cập nhật.
• Angular – khoá ở đây là applicationRef.tick dùng để xoá các thay đổi DOM đang chờ xử lý. Kể từ Angular phiên bản 17, bạn có thể sử dụng withViewTransitions đi kèm với @angular/router.

Tài liệu tham khảo API

const viewTransition = document.startViewTransition(update)

Bắt đầu một ViewTransition mới.

update là một hàm được gọi sau khi trạng thái hiện tại của tài liệu được ghi lại.

Sau đó, khi lời hứa do updateCallback trả về được thực hiện, quá trình chuyển đổi sẽ bắt đầu trong khung tiếp theo. Nếu lời hứa do updateCallback trả về bị từ chối, quá trình chuyển đổi sẽ bị bỏ qua.

const viewTransition = document.startViewTransition({ update, types })

Bắt đầu một ViewTransition mới với các kiểu đã chỉ định

update được gọi sau khi trạng thái hiện tại của tài liệu được chụp.

types đặt các loại đang hoạt động cho hiệu ứng chuyển đổi khi chụp hoặc thực hiện hiệu ứng chuyển đổi. Ban đầu, biến này trống. Hãy xem viewTransition.types ở phần bên dưới để biết thêm thông tin.

Thành phần của thực thể của ViewTransition:

viewTransition.updateCallbackDone

Lời hứa sẽ thực hiện khi updateCallback trả về lời hứa thực hiện hoặc từ chối khi từ chối.

View Transition API bao bọc một thay đổi DOM và tạo một hiệu ứng chuyển đổi. Tuy nhiên, đôi khi bạn không quan tâm đến việc ảnh động chuyển đổi có thành công hay không, bạn chỉ muốn biết liệu DOM có thay đổi hay không và khi nào DOM thay đổi. updateCallbackDone là dành cho trường hợp sử dụng đó.

viewTransition.ready

Lời hứa sẽ thực hiện sau khi các phần tử giả cho hiệu ứng chuyển đổi được tạo và ảnh động sắp bắt đầu.

Hệ thống sẽ từ chối nếu quá trình chuyển đổi không thể bắt đầu. Việc này có thể là do cấu hình sai, chẳng hạn như các view-transition-name trùng lặp hoặc nếu updateCallback trả về lời hứa bị từ chối.

Việc này rất hữu ích khi tạo ảnh động cho các phần tử giả chuyển đổi bằng JavaScript.

viewTransition.finished

Một lời hứa thực hiện sau khi trạng thái kết thúc hiển thị đầy đủ và có thể tương tác với người dùng.

Phương thức này chỉ từ chối nếu updateCallback trả về một lời hứa bị từ chối, vì điều này cho biết trạng thái kết thúc không được tạo.

Ngược lại, nếu quá trình chuyển đổi không bắt đầu hoặc bị bỏ qua trong quá trình chuyển đổi, thì trạng thái kết thúc vẫn sẽ đạt đến, vì vậy finished sẽ thực hiện.

viewTransition.types

Đối tượng giống Set chứa các loại chuyển đổi khung hiển thị đang hoạt động. Để thao tác với các mục nhập, hãy sử dụng các phương thức thực thể clear(), add() và delete().

Để phản hồi một loại cụ thể trong CSS, hãy sử dụng bộ chọn lớp giả :active-view-transition-type(type) trên thư mục gốc chuyển đổi.

Các kiểu sẽ tự động được dọn dẹp khi quá trình chuyển đổi chế độ xem kết thúc.

viewTransition.skipTransition()

Bỏ qua phần ảnh động của hiệu ứng chuyển đổi.

Thao tác này sẽ không bỏ qua việc gọi updateCallback, vì sự thay đổi DOM tách biệt với quá trình chuyển đổi.

Tài liệu tham khảo về kiểu và chuyển đổi mặc định

::view-transition

Phần tử giả gốc lấp đầy khung nhìn và chứa từng ::view-transition-group.

::view-transition-group

Hoàn toàn đúng.

Chuyển đổi width và height giữa phần "trước" và "sau" các trạng thái.

Chuyển đổi transform giữa hình tứ giác không gian khung nhìn "trước" và "sau".

::view-transition-image-pair

Hoàn toàn có đủ khả năng để đưa vào nhóm.

Có isolation: isolate để giới hạn hiệu ứng của mix-blend-mode trên thành phần hiển thị cũ và mới.

::view-transition-new và ::view-transition-old

Được đặt ở vị trí tuyệt đối ở trên cùng bên trái của trình bao bọc.

Lấp đầy 100% chiều rộng của nhóm, nhưng có chiều cao tự động, nên sẽ duy trì tỷ lệ khung hình thay vì lấp đầy nhóm.

Có mix-blend-mode: plus-lighter để cho phép hiệu ứng mờ dần thực sự.

Chế độ xem cũ sẽ chuyển đổi từ opacity: 1 sang opacity: 0. Chế độ xem mới chuyển đổi từ opacity: 0 sang opacity: 1.

Phản hồi

Chúng tôi luôn trân trọng ý kiến phản hồi của nhà phát triển. Để thực hiện việc này, hãy gửi vấn đề cho Nhóm hoạt động CSS trên GitHub kèm theo các đề xuất và câu hỏi. Thêm tiền tố [css-view-transitions] cho vấn đề của bạn.

Nếu bạn gặp lỗi, hãy gửi lỗi Chromium.