feat: View Transition hook

[GrandSchtroumpf]

What is it?

• Feature / enhancement

Description

Emit an event when view transition start with the ViewTransition object in the detail.
Fix QwikDev/qwik-evolution#135

The goal is to hook into the view transition process to create animation in with JS :

useDocument('qviewTransition', $(async (event: CustomEvent<ViewTransition>) => {
  const transition = event.detail;
  await transition.ready; // Wait for ::view-transition-old pseudo class to exist
  document.documentElement.animate([
    // keyframes
  ], {
    pseudoElement: `::view-transition-old(.cards)::only-child`,
  })
}))

Checklist

• My code follows the developer guidelines of this project
• I performed a self-review of my own code
• I added a changeset with pnpm change
• I made corresponding changes to the Qwik docs

[changeset-bot]

🦋 Changeset detected

Latest commit: f583ec9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@builder.io/qwik	Patch
eslint-plugin-qwik	Patch
@builder.io/qwik-city	Patch
create-qwik	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[pkg-pr-new]

Open in Stackblitz

npm i https://pkg.pr.new/@builder.io/qwik@7237

npm i https://pkg.pr.new/@builder.io/qwik-city@7237

npm i https://pkg.pr.new/eslint-plugin-qwik@7237

npm i https://pkg.pr.new/create-qwik@7237

commit: 25eed2b

[github-actions]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
qwik-docs	✅ Ready (View Log)	Visit Preview	f583ec9