CSSView Transitions API tạo hiệu ứng chuyển đổi mượt mà giữa DOM states hoặc giữa các trang. Khi gọi document.startViewTransition(), browser snapshot trạng thái trước, áp dụng thay đổi DOM, rồi animate sự khác biệt.
Hai loại:
- Same-document (Chrome 111+): list reordering, tab switching, morph animations
- Cross-document (Chrome 126+): chuyển trang trong MPA
Tạo trải nghiệm page transitions giống native app mà trước đây cần nhiều JavaScript phức tạp.
The View Transitions API creates smooth animated transitions between DOM states or between pages.
- When you call
document.startViewTransition(), the browser automatically captures a snapshot of the previous state, applies the DOM change, then animates the difference. - Two types: same-document transitions (Chrome 111+) for in-page changes like list reordering, tab switching, and morph animations; and cross-document transitions (Chrome 126+) for page navigation in MPAs.
- A major step forward for achieving native app-like page transitions that previously required complex JavaScript.