View Transitions - Declarative

Published: 27 December 2022
on channel: A shot of code
520
27

View Transitions enable fancy animations of page items between page navigations. In this tutorial we look at how to configure view transitions using the declarative approach and avoid any Javascript whatsoever.

To enable view transitions this way we need to add a meta tag and also a CSS view transition name property to the element to animate on both the old and new pages.

At the time of recording this is a preview feature in Chrome Canary only and can be enabled by navigating to chrome://flags and the 'View Transition API' and 'View Transition API for navigations' flags.

Should work for both SPA and MPA applications.

Some useful references for additional learning:
https://github.com/WICG/view-transiti...
https://www.w3.org/TR/css-view-transi...


Watch video View Transitions - Declarative online without registration, duration hours minute second in high quality. This video was added by user A shot of code 27 December 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 520 once and liked it 27 people.