[✨] View Transition Hook #229
Description
Champion: @GrandSchtroumpf
Discussed in #135
Originally posted by GrandSchtroumpf August 26, 2023
Is your feature request related to a problem?
I'm trying a animate a list of item on page navigation. For that I'm animating with Javascript, but there is no way to hook into the transition from the link.
const animate = $(() => {
const items = document.querySelectorAll('.item');
for (const item of items) {
const transitionName = item.style.getProperty('view-transition-name');
// Animation is not working because I need to be inside the transition
document.documentElement.animate({
transform: [....],
}, {
pseudoElement: `::view-transition-old(${transitionName})`,
duration: 200
})
}
})
return <Link onClick$={animate} href="...">Link</Link>Describe the solution you'd like
Ideally the Link element & useNavigation would expose a callback for that :
const animate = $((transition, element) => {
....
})
return <Link onViewTransition$={animate} href="...">Link</Link>Describe alternatives you've considered
We cannot set the animation inside style because this is a pseudo element of html.
As we cannot update the pseudo element with Javascript and we cannot use css variable like that ::view-transition-old(var(--name)).
We cannot set a <style> on each element because it'll be removed before the view transition is ready.
The only solution is to add <style> inside head with all the ::view-transition-old() pseudo class and remove them:
const viewTransitionName = "...";
useVisibleTask$(() => {
const style = document.createElement('stlye');
style.textContent = `::view-transition-old(${viewTransitionName}) { animation: ....; }`
const child = document.head.appenChild(style);
return () => setTimeout(() => document.head.removeChild(child), 1000); // wait for transition to be done
});
return <Link href="">...</Link>Note: I'm not using ::view-transition-old(*) because I want to target specific elements (not all) and I want to add delay.