The landscape of native, web, and hybrid development is defined to set the context for the View Transition API's impact.
Native apps have superior animation capabilities like container transforms, which are difficult to replicate on the web due to the rigid DOM structure.
The API simplifies animations by taking before-and-after screenshots of the DOM, performing changes in the background, and then cross-fading between the two states.
A side-by-side demonstration shows how view transitions transform a functional but plain app into a visually appealing and fluid user experience.
The browser creates a temporary top-level DOM layer with special pseudo-elements for the old snapshot and new live view states, which can be targeted with CSS.
Enabling the default cross-fade transition is simple with a framework feature flag, and these default animations can be overridden with custom CSS.
Assigning a unique view-transition-name to an element in both the start and end states allows the browser to automatically animate its size and position.
The API is evolving with proposed features like scope transitions and multi-page transitions, and can be used creatively for list sorting, sliders, and accordions.
22:46Cleyra Uzcategui
40:24Clemens Helm
58:12Lucien Immink
45:20Christian Liebel
27:05Rowdy Rabouw
44:40Maxim Salnikov
44:43Nikita Dubko
41:49Ire Aderinokun
.webp?w=240&auto=compress,format)
Jobs that call for the skills explored in this talk.
Speech Processing Solutions
Vienna, Austria
JO Media Software Solutions GmBh
Brunn am Gebirge, Austria
doinstruct Software GmbH
Berlin, Germany
Saby New Compy
Bielefeld, Germany
tarent solutions GmbH
tarent solutions GmbH
tarent solutions GmbH