Google will support View Transition API, an experimental technology in Chrome 111. View Transition API will allow developers to easily update the DOM, generate animation transitions between different DOM states, and further change the content of the DOM to simplify single-page applications. Development work for switching screens.
View Transition is a popular design method. By retaining the context of the browsing screen and only updating part of the content, it helps reduce the user’s cognitive load and reduces the loading caused by the application status or screen switching. Delay. According to the MDN web document, it has always been difficult to perform screen transitions on web pages, and state switching in a single-page application (SPA) requires writing a lot of complex CSS and JavaScript code.
The parts that need to be dealt with include loading and positioning the old and new content, creating animations to transition from the old state to the new state, and dealing with problems that may be caused when the user accidentally clicks on the old content, and finally moving the Delete old content. In addition, presenting old and new content in the same position also requires dealing with issues such as loss of reading position or confusion of focus, and the View Transition API provides developers with an easy way to handle DOM changes and animation transitions.
In terms of browser support, only Chrome 111 is currently supported among major browsers, Edge is still in the development stage, and Firefox and Safari have not yet supported. Google mentioned that they will also expand the support of the View Transition API to make the functions more complete. However, the View Transition API in Chrome Canary is temporarily out of order. Developers who want to try the API need to choose the Chrome 111 stable version or the Chrome 112 beta version.