View Transitions between pages MPA
Try: Click between page A and page B. Both documents opt
into cross-document transitions with @view-transition { navigation:
auto; }, so same-origin link navigation can animate without JS.
Overview
Campaign dashboard
This page is the "before" state. The badge and hero card keep the
same view-transition-name on both pages so the browser
can animate them across navigation.
Source
@view-transition {
navigation: auto;
}
.hero {
view-transition-name: page-hero;
}
.hero-badge {
view-transition-name: page-badge;
}
Support: Cross-document view transitions work on
same-origin navigations when both pages opt in. If the click jumps with
no animation, your browser likely doesn't support the MPA flavor yet.