[✨] View Transition Hook

[shairez]

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.

Active PRs

QwikDev/qwik#7237

[shairez]

@GrandSchtroumpf can you please wrap this under experimental please? that way we would be able to collect feedback before solidifying the final API

Thanks!

[GrandSchtroumpf]

With the new qviewTransition event we don't need this anymore. Let's close it.

[shairez]

OK cool, thanks