Adding support for page transitions when navigating using the View Transitions API

[hawkerboy7]

Hi all,

Right now I have the code below to be able to have page transitions when navigating using the View Transitions API.

const transition = function (fnThatChangesTheDOM) {

	// In case the API is not yet supported
	if (!document.startViewTransition) { return fnThatChangesTheDOM() }

	// Transition the changes in the DOM
	const transition = document.startViewTransition(fnThatChangesTheDOM)
}

useBeforeLeave((e) => {

	// Stop the inmediate navigation and DOM change
	e.preventDefault()

	// Perform the action that triggers a DOM change
	transition(() => { e.retry(true) })
}))

Tough it works, to me this does not really seem to be the way it should be done and @mishimalisa also noted it might not always work due to asynchronicity.

Would the following be a viable method to support this behaviour (credits to @mishimalisa)?

useBeforeRouterTriggersDOMChanges((triggerTheChangesToTheDOM) => {
	transition(triggerTheChangesToTheDOM)
})

In which

• useBeforeRouterTriggersDOMChanges will trigger just before SolidJS changes the DOM as a result of navigation
  and
• triggerTheChangesToTheDOM is a function which will trigger SolidJS to start changing the DOM.

EDIT: Adjusted function names to better reflect what happens

[hawkerboy7]

Hi @ryansolid,
This may be a "simple" question but a "hard one" to implement.
Could you perhaps point me in the right direction so I could try to make a pull request for this functionality?

[ryansolid]

Yeah. I was thinking the hook might want to be handled by Solid itself, because you want to get in there before and after the synchronous part of the render. Or I guess it wraps it. It is a bit awkward to do right now but something I'm keeping in mind for future reactivity designs.

[EricRovell]

SvelteKit implemented onNavigate lifecycle function, maybe it can be helpful?