Tính năng mới trong hiệu ứng chuyển đổi chế độ xem (nội dung cập nhật năm 2025)

Bramus

Ngày xuất bản: 8 tháng 10 năm 2025

Đã có nhiều thay đổi kể từ khi chúng tôi phát hành hoạt ảnh chuyển đổi chế độ xem trong cùng một tài liệu vào năm 2023.

Vào năm 2024, chúng tôi đã phát hành các hiệu ứng chuyển đổi khung hiển thị trên nhiều tài liệu, thêm các điểm tinh chỉnh như view-transition-class và các loại hiệu ứng chuyển đổi khung hiển thị, đồng thời hoan nghênh Safari khi trình duyệt này thêm tính năng hỗ trợ cho hiệu ứng chuyển đổi khung hiển thị.

Bài đăng này cung cấp cho bạn thông tin tổng quan về những thay đổi đối với hiệu ứng chuyển đổi chế độ xem vào năm 2025.

Hỗ trợ tốt hơn cho trình duyệt và khung

Các hiệu ứng chuyển đổi chế độ xem trong cùng một tài liệu sắp trở thành Cơ sở mới có sẵn

Một lĩnh vực trọng tâm của Interop 2025 là View Transition API, cụ thể là các hiệu ứng chuyển đổi khung hiển thị trong cùng một tài liệu bằng document.startViewTransition(updateCallback), view-transition-class, tính năng tự động đặt tên bằng view-transition-name: match-element và bộ chọn CSS :active-view-transition.

Firefox dự định đưa các tính năng này vào bản phát hành Firefox 144 sắp tới. Bản phát hành này sẽ ổn định vào ngày 14 tháng 10 năm 2025. Điều này sẽ giúp các tính năng này có sẵn trong Baseline Newly.

API Chuyển đổi khung hiển thị hiện được hỗ trợ trong lõi React

Trong suốt năm qua, nhóm React đã nỗ lực bổ sung hiệu ứng chuyển đổi chế độ xem vào lõi của React. Họ đã thông báo react@experimental hỗ trợ vào tháng 4 và tuần này, tại React Conf, họ đã chuyển việc hỗ trợ này sang react@canary, tức là thiết kế này sắp hoàn tất.

function Child() {
  return (
    <ViewTransition>
      <div>Hi</div>
    </ViewTransition>
  );
}

function Parent() {
  const [show, setShow] = useState();
  if (show) {
    return <Child />;
  }
  return null;
}

Bạn có thể xem tài liệu <ViewTransition> của React để biết tất cả thông tin chi tiết hoặc xem bài nói chuyện này của Aurora Scharff để có phần giới thiệu hay về chủ đề này.

Các tính năng mới ra mắt gần đây

Tự động đặt tên cho các phần tử bằng view-transition-name: match-element

Để đánh dấu một phần tử sẽ được chụp nhanh trong quá trình chuyển đổi chế độ xem, bạn sẽ cung cấp cho phần tử đó một view-transition-name. Đây là yếu tố then chốt đối với hiệu ứng chuyển đổi chế độ xem, vì nó mở ra các tính năng như chuyển đổi giữa hai phần tử khác nhau. Mỗi phần tử có cùng giá trị view-transition-name ở mỗi bên của hiệu ứng chuyển đổi và hiệu ứng chuyển đổi chế độ xem sẽ xử lý mọi thứ cho bạn.

Tuy nhiên, việc đặt tên riêng biệt cho các phần tử có thể trở nên rườm rà khi chuyển đổi nhiều phần tử không thực sự thay đổi. Nếu có 100 phần tử di chuyển trong một danh sách, bạn phải nghĩ ra 100 tên riêng biệt.

Nhờ match-element, bạn không cần phải làm tất cả những việc đó. Khi sử dụng giá trị này cho view-transition-name, trình duyệt sẽ tạo một view-transition-name nội bộ cho mọi phần tử khớp dựa trên danh tính của phần tử.

Trong bản minh hoạ sau, phương pháp này được sử dụng. Mỗi thẻ trong hàng sẽ được tự động tạo một view-transition-name.

.card {
  view-transition-name: match-element;
  view-transition-class: card;
}

#targeted-card {
  view-transition-name: targeted-card;
  view-transition-class: none;
}

Thẻ duy nhất vào hoặc ra sẽ có tên rõ ràng. Tên đó được dùng trong CSS để đính kèm các ảnh động cụ thể vào ảnh chụp nhanh đó. Ảnh chụp nhanh của tất cả các thẻ khác được tạo kiểu bằng view-transition-class được liên kết với các thẻ đó.

/* Style all pseudos with the class .card */
::view-transition-group(*.card) {
  animation-timing-function: var(--bounce-easing);
  animation-duration: 0.5s;
}

/* Style only the targeted-card's pseudos */
::view-transition-old(targeted-card):only-child {
  animation: animate-out ease-out 0.5s forwards;
}
::view-transition-new(targeted-card):only-child {
  animation: animate-in ease-in 0.25s forwards;
}

Giờ đây, Công cụ cho nhà phát triển sẽ cho thấy các quy tắc nhắm đến các phần tử giả sử dụng view-transition-class

Để gỡ lỗi hiệu ứng chuyển đổi khung hiển thị, bạn có thể sử dụng bảng điều khiển Ảnh động trong Công cụ cho nhà phát triển để tạm dừng tất cả ảnh động. Nhờ đó, bạn có thời gian kiểm tra các phần tử giả mà không phải lo lắng rằng hiệu ứng chuyển đổi khung hiển thị sẽ đạt đến trạng thái hoàn tất. Bạn thậm chí có thể tua qua dòng thời gian của ảnh động theo cách thủ công để xem các hiệu ứng chuyển đổi diễn ra như thế nào.

Trước đây, khi kiểm tra một trong các phần tử giả ::view-transition-*, Công cụ của Chrome cho nhà phát triển không hiển thị các quy tắc nhắm đến phần tử giả bằng cách sử dụng view-transition-class đã đặt. Điều này đã thay đổi trong Chrome 139 khi chức năng này được thêm vào.

Các nhóm chuyển đổi chế độ xem lồng nhau có trong Chrome 140

Khi một hiệu ứng chuyển đổi khung hiển thị chạy, hiệu ứng này sẽ kết xuất các phần tử được chụp nhanh trong một cây gồm các phần tử giả. Theo mặc định, cây được tạo là "phẳng". Điều này có nghĩa là hệ thống phân cấp ban đầu trong DOM sẽ bị mất và tất cả các nhóm chuyển đổi khung hiển thị được chụp đều là các phần tử ngang cấp trong một phần tử giả ::view-transition duy nhất.

Phương pháp cây phẳng này đủ cho nhiều trường hợp sử dụng, nhưng sẽ trở thành vấn đề khi các hiệu ứng hình ảnh như cắt hoặc biến đổi 3D được sử dụng. Những mục này yêu cầu một số thứ bậc trong cây.

Nhờ "Nhóm chuyển đổi khung hiển thị lồng nhau", giờ đây, bạn có thể lồng các phần tử giả ::view-transition-group vào nhau. Khi các nhóm chuyển đổi khung hiển thị được lồng vào nhau, bạn có thể khôi phục các hiệu ứng như cắt trong quá trình chuyển đổi.

Tìm hiểu cách sử dụng nhóm chuyển đổi khung hiển thị

Giờ đây, các phần tử giả sẽ kế thừa nhiều thuộc tính ảnh động hơn

Khi bạn đặt một trong các thuộc tính animation-* dài trên một giả ::view-transition-group(…), ::view-transition-image-pair(…), ::view-transition-old(…) và ::view-transition-new(…) có trong đó cũng sẽ kế thừa thuộc tính đó. Điều này rất hữu ích vì nó tự động giữ cho hiệu ứng chuyển cảnh giữa ::view-transition-new(…) và ::view-transition-old(…) đồng bộ với ::view-transition-group(…).

::view-transition-group(.card) {
  animation-duration: 0.5s;
}

Ban đầu, tính kế thừa này chỉ giới hạn ở animation-duration và animation-fill-mode (sau này là animation-delay), nhưng giờ đây, tính kế thừa này đã được mở rộng để kế thừa nhiều thuộc tính animation longhand hơn.

Các trình duyệt hỗ trợ hiệu ứng chuyển đổi chế độ xem hiện phải có nội dung sau trong biểu định kiểu tác nhân người dùng

:root::view-transition-image-pair(*),
:root::view-transition-old(*),
:root::view-transition-new(*) {
  animation-duration: inherit;
  animation-fill-mode: inherit;
  animation-delay: inherit;
  animation-timing-function: inherit;
  animation-iteration-count: inherit;
  animation-direction: inherit;
  animation-play-state: inherit;
}

Các phần tử giả kế thừa nhiều thuộc tính hơn được phát hành trong Chrome 140.

Việc thực thi lệnh gọi lại hứa hẹn finished không còn chờ một khung hình nữa

Khi sử dụng lời hứa finished để thực thi một lệnh gọi lại, Chrome thường đợi một khung hình được tạo ra trước khi thực thi logic đó. Điều này có thể gây ra hiện tượng nhấp nháy ở cuối ảnh động khi tập lệnh di chuyển một số kiểu xung quanh để cố gắng duy trì trạng thái tương tự về mặt hình ảnh.

 document.startViewTransition(() => {
  if (from) {
    dfrom.classList.remove("shadow");
    dto.appendChild(target);
  } else {
    dto.classList.remove("shadow");
    dfrom.appendChild(target);
  }
}).finished.then(() => {
  if (from) {
    dto.classList.add("shadow");
  } else {
    dfrom.classList.add("shadow");
  }
  from = 1 - from;
});

Thay đổi này về thời gian sẽ khắc phục tình trạng bằng cách di chuyển các bước dọn dẹp quá trình chuyển đổi khung hiển thị để chạy không đồng bộ sau khi vòng đời hoàn tất. Điều này đảm bảo rằng khung hình trực quan được tạo khi giải quyết lời hứa finished vẫn duy trì cấu trúc chuyển đổi khung hiển thị, nhờ đó tránh được hiện tượng nhấp nháy.

Thay đổi về thời gian này đã được triển khai trong Chrome 140.

Các tính năng sắp ra mắt

Năm nay vẫn chưa kết thúc, nên vẫn còn thời gian để chúng tôi ra mắt thêm một số tính năng.

Các hiệu ứng chuyển đổi chế độ xem có phạm vi đã sẵn sàng để kiểm thử trong Chrome 140

Chuyển đổi khung hiển thị theo phạm vi là một tiện ích đề xuất cho View Transition API, cho phép bạn bắt đầu một hiệu ứng chuyển đổi khung hiển thị trên một cây con của DOM bằng cách gọi element.startViewTransition() (thay vì document.startViewTransition()) trên mọi HTMLElement.

Các hiệu ứng chuyển đổi có phạm vi cho phép nhiều hiệu ứng chuyển đổi khung hiển thị chạy cùng lúc (miễn là chúng có các gốc chuyển đổi khác nhau). Các sự kiện con trỏ chỉ bị ngăn chặn trên cây con đó (bạn có thể bật lại), chứ không phải toàn bộ tài liệu. Ngoài ra, các thành phần này cho phép vẽ các phần tử bên ngoài gốc chuyển đổi lên trên hiệu ứng chuyển đổi chế độ xem có phạm vi.

Trong bản minh hoạ sau, bạn có thể di chuyển một dấu chấm trong vùng chứa của dấu chấm đó bằng cách nhấp vào một trong các nút. Bạn có thể thực hiện việc này bằng các hiệu ứng chuyển đổi chế độ xem theo phạm vi tài liệu hoặc hiệu ứng chuyển đổi chế độ xem theo phạm vi phần tử, cho phép bạn xem cách chúng hoạt động khác nhau.

Tính năng này đã sẵn sàng để thử nghiệm từ Chrome 140 khi bạn bật cờ "Các tính năng thử nghiệm của nền tảng web" trong chrome://flags. Chúng tôi đang tích cực thu thập ý kiến phản hồi của nhà phát triển.

Vị trí của ::view-transition sẽ thay đổi từ fixed thành absolute trong Chrome 142

Giả lập ::view-transition hiện được định vị bằng position: fixed. Theo một nghị quyết của Nhóm công tác CSS, giá trị này sẽ thay đổi thành position: absolute.

Sự thay đổi giá trị position từ fixed thành absolute (sắp có trong Chrome 142) không thể quan sát được bằng mắt thường vì khối chứa của giả ::view-transition dù sao cũng là khối chứa ảnh chụp nhanh. Hiệu ứng duy nhất có thể quan sát được là giá trị position khác khi thực hiện getComputedStyle.

document.activeViewTransition sẽ có trong Chrome 142

Khi quá trình chuyển đổi khung hiển thị bắt đầu, một thực thể ViewTransition sẽ được tạo. Đối tượng này chứa một số promise và chức năng để theo dõi tiến trình chuyển đổi, cũng như cho phép các thao tác như bỏ qua quá trình chuyển đổi hoặc sửa đổi các loại chuyển đổi.

Thay vì yêu cầu bạn theo dõi thực thể này theo cách thủ công, Chrome hiện cung cấp một thuộc tính document.activeViewTransition đại diện cho đối tượng này. Nếu không có hiệu ứng chuyển đổi nào đang diễn ra, giá trị của hiệu ứng đó là null.

Đối với các hiệu ứng chuyển đổi chế độ xem trong cùng một tài liệu, giá trị sẽ được đặt khi bạn gọi document.startViewTransition. Đối với các hiệu ứng chuyển đổi chế độ xem giữa các tài liệu, bạn có thể truy cập vào thực thể ViewTransition đó trong các sự kiện pageswap và pagereveal.

Chrome 142 sắp hỗ trợ document.activeViewTransition.

Ngăn quá trình chuyển đổi khung hiển thị tự động hoàn tất bằng ViewTransition.waitUntil

Quá trình chuyển đổi khung hiển thị sẽ tự động đạt đến trạng thái finished khi tất cả ảnh động của quá trình này hoàn tất. Để ngăn chặn việc hoàn tất tự động này, bạn có thể sớm sử dụng ViewTranistion.waitUntil. Khi truyền vào một lời hứa, ViewTransition sẽ chỉ đạt đến trạng thái finished khi lời hứa được truyền đó cũng được giải quyết.

const t = document.startViewTransition(…);
t.waitUntil(async () => {
  await fetch(…);
});

Thay đổi này sẽ diễn ra vào cuối năm nay và cho phép, chẳng hạn như chờ fetch hoặc mở khoá việc triển khai dễ dàng hơn một hiệu ứng chuyển đổi khung hiển thị dựa trên thao tác cuộn.

Bước tiếp theo

Như bạn có thể thấy, chúng tôi đã không ngừng nỗ lực kể từ khi phát hành View Transitions lần đầu tiên vào năm 2023. Chúng tôi rất mong được phát hành các hiệu ứng chuyển đổi chế độ xem có phạm vi trong tương lai và như mọi khi, chúng tôi luôn sẵn sàng lắng nghe ý kiến phản hồi.

Nếu bạn có thắc mắc về hiệu ứng chuyển đổi khung hiển thị, hãy liên hệ với chúng tôi trên mạng xã hội. Bạn có thể gửi yêu cầu về tính năng cho hiệu ứng chuyển đổi khung hiển thị tại CSS WG. Nếu bạn gặp phải lỗi, hãy gửi thông báo lỗi cho Chromium để cho chúng tôi biết.