Example code for implementing View Transitions on MPAs for navigations between PLP and PDP pages.

plp-pdp-view-transition-mpa.js

const PRODUCT_ANCHOR_ELEMENT_SELECTOR = '[data-component="ProductCardLink"]';
// get all <a> elemenets in a list of product links
const links = Array.from(document.querySelectorAll(PRODUCT_ANCHOR_ELEMENT_SELECTOR));

links.map(link => {
    link.addEventListener('click', async (e) => {
        e.preventDefault();
        const image = link.querySelector('img');

        // View Transition necessary styles
        image.style.viewTransitionName = 'zoom';
        image.style.contain = 'layout';

        document.startViewTransition(() => {
            window.location.href = link.href;
        });
     });
});