CSS View Transitions API là gì?

View Transitions API cho browser tự animate quá trình đổi giữa hai trạng thái DOM: nó chụp ảnh trạng thái cũ, áp thay đổi, chụp trạng thái mới, rồi chuyển tiếp giữa hai ảnh.

// same-document
if (document.startViewTransition) {
  document.startViewTransition(() => {
    renderNewList()          // cập nhật DOM ở đây
  })
} else {
  renderNewList()            // dự phòng: đổi ngay, không hiệu ứng
}

Gắn tên để hai phần tử "biến hình" vào nhau giữa hai trạng thái:

.thumbnail { view-transition-name: hero-image; }   /* ở trang danh sách */
.hero      { view-transition-name: hero-image; }   /* ở trang chi tiết */

::view-transition-old(hero-image),
::view-transition-new(hero-image) { animation-duration: 0.3s; }

Hai loại:
- Same-document (Chrome 111+) — sắp xếp lại danh sách, chuyển tab, mở chi tiết trong SPA.
- Cross-document (Chrome 126+) — chuyển giữa hai trang thật trong MPA, chỉ cần một dòng CSS @view-transition { navigation: auto; }.

Lưu ý 1: view-transition-name phải là duy nhất tại mỗi thời điểm. Hai element cùng tên cùng lúc làm transition bị bỏ qua hoàn toàn.

Lưu ý 2: trong lúc chuyển, ảnh chụp nằm ở lớp trên cùng và chặn tương tác. Transition dài quá 400ms sẽ khiến giao diện có cảm giác bị treo.

An toàn: luôn kiểm tra document.startViewTransition tồn tại trước khi gọi, vì Safari và Firefox hỗ trợ chưa đầy đủ.