Created
February 16, 2023 12:36
-
-
Save charisTheo/9333b9d611accffeb51cac70bb3542a8 to your computer and use it in GitHub Desktop.
Example code for implementing View Transitions on MPAs for navigations between PLP and PDP pages.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
}); | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment