Add a View Transition Name for each product image
Open components/ProductItem.js
and add in the right place, after the image src definition:
this.querySelector("img").style.viewTransitionName = `image-${product.id}`
Open components/DetailsPage.js
and add in the right place, after the image src definition:
this.root.querySelector("img").style.viewTransitionName = `image-${this.product.id}`
Enable Shadow DOM Parts
Open index.html
, find <template id="details-page-template">
and add part="image"
to the <img>
element.
Apply CSS styles
Open styles.css
and add the following code:
details-page::part(image) {
width: 120%;
margin-left: -10%;
}
::view-transition-new(image) {
animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in
}
Read more about the API
Check the documentation at https://developer.chrome.com/docs/web-platform/view-transitions