View Transition

[GrandSchtroumpf]

What is it about?

Provide an ViewTransition API integrated into Qwik

What's the motivation for this proposal?

Problems you are trying to solve:

ViewTransition needs to run before DOM is updated & wait until DOM is updated, so it's difficult to achieve a good API outside of the framework itself

Goals you are trying to achieve:

Create an Qwik API for ViewTransition.

Any other context or information you want to share:

React just released an API for ViewTransition, let's do the same, but better :)

---

Proposed Solution / Feature

What do you propose?

3 things :

1. An imperative function to start view transition
   This function takes a callback that changes the state and wait for next DOM update

async function startViewTransition(update, { types }) {
 if ('startViewTransition' in document) {
   const transition = document.startViewTransition({
     update: async () => {
       await update();
       await nextDOMUpdate(); // <-- TODO: find most reliable way to wait for next dom update
     },
     types: [...types, 'qwik-update']
   });
   // Integrate with existing events
   document.dispatchEvent(new CustomEvent('qViewTransition', transition));
   return transition;
 } else {
   return update();
 }
}

How to use it :

const counter = useSignal(1);
return <button onClick$={() => startViewTransition(() => counter.value++)}>Add</button>

2. An reactive hook to start view transition:
   This hook will listen on signal, props or store changes and startViewTransition before the DOM is update.

function useViewTransition({ track, types }) {
  // This code need to be integrated with the scheduler to work
}

How to use it :

const counter = useSignal(1);
useViewTransition({
  track: counter,
  types: ['increment'],
})

3. Add an attribute add view-transition-class (Optional)
   This is a shortcut to simplify the use of view-transition-name & view-transition-class

@layer qwik {
  @property --view-transition-name {
    synthax: '<custom-indent>';
    inherits: false;
  }
  [qViewTransitionName] {
    view-transition-name: attr(qViewTransitionName type(<custom-indent>));
  }
  [qViewTransitionClass] {
    view-transition-name: match-element;
    view-transition-class: attr(qViewTransitionClass type(<custom-indent>));
  }
}

How to use it:

return (
  <section>
    <img qViewTransitionName="avatar">
    <ul>
      {list.map(item => <li key={item} qViewTransitionClass="item")}>{item}</li>)}
    </ul>
  </section>
)

Currently Safari & Firefox don't support the attr(... type()), but it's still possible to use style.

Animate with JS

Since startViewTransition & useViewTransition would both emit the qViewTransition event, we can animate with useOnDocument :

useOnDocument('qViewTransition', $((e) => {
  const transition = e.details;
  if (transition.types.includes('increments')) {
    document.animate(...);
  }
}))

Links / References

ViewTransition API doc:
https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API

React API :
https://react.dev/reference/react/ViewTransition

Qwik current integration:
https://qwik.dev/docs/cookbook/view-transition/

[wmertens]

ok nice. I would only implement the class stuff once Safari & Firefox promise to have it.

So the only thing required from the framework is that nextDOMUpdate() call that returns when the currently planned DOM updates have completed, right?

Paging @Varixo for that.

[GrandSchtroumpf]

We need nextDOMUpdate() for startViewTransition() (imperative function) for sure.

For useViewTransition(), I'm not sure. Does useTask$ callback runs before or after DOM updates ?
If it's before we are good, else we would need a way to run useViewTransition before DOM update.

[thejackshelton]

const add = $(() => {
  startViewTransition({
    update: () => percent.value++,
    type: ['increment']
  });
})

I had a similar type of API experimenting this week. My thoughts at the time were that we could avoid a lot of the closure craziness with something like transition$.

const add = transition$(() => {
  percent.value++;
});

onClick$={add}

---

I like the idea of allowing multiple jsx nodes to share view transitions with the qViewTransition attribute, although the naming IMO could be more intuitive. React uses a share prop that takes a string, maybe we could have something similar? Or name is something like transition

And if it's a basic view transition like an enter and exit animation I don't think a name is needed, the framework or API could generate the name for you. That's another benefit of transition$

Transition types could be handled like this, then there is no need for a hook at all, and you can place the function anywhere

export default component$(() => {
  const count = useSignal(0);
  
  const increment = transition$(() => {
    count.value++;
  }, { types: ['increment'] });
  
  const decrement = transition$(() => {
    count.value--;
  }, { types: ['decrement'] });
  
  return (
    <div>
      <div>{count.value}</div>
      <button onClick$={increment}>+</button>
      <button onClick$={decrement}>-</button>
    </div>
  );
});

Then later in CSS:

/* Slide up when incrementing */
html:has-view-transition-type(increment) ::view-transition-new(root) {
  animation: slide-up 0.3s;
}

/* Slide down when decrementing */
html:has-view-transition-type(decrement) ::view-transition-new(root) {
  animation: slide-down 0.3s;
}

[thejackshelton]

Even conditional types, like:

const increment = transition$(() => {
  count.value++;
}, { 
  types: ['increment', count.value >= 100 ? 'milestone' : null].filter(Boolean)
});

This makes animation more dynamic and easy to use

[GrandSchtroumpf]

I agree, transition$ would be a better user experience. We could have a lower level startViewTransition function that is used in both transition$ and useViewTransition :)

[GrandSchtroumpf]

Here is a stackblitz to test transition$ and useViewTransition:
https://stackblitz.com/edit/vitejs-vite-dyda5a24?file=src%2Fapp.tsx

• transition$ works well. I used setTimeout(res, 10) to wait for next DOM update, it was more reliable that requestAnimationFrame & queueMicroTask
• useViewTransition doesn't work with useTask$, so we would need to find a way to run the code before the DOM is updated.