`onPageTransitionStart()` hook

The onPageTransitionStart() hook, together with onPageTransitionEnd(), enables you to implement page transition animations.

// /pages/+onPageTransitionStart.ts
// Environment: browser
 
import type { PageContextClient } from 'vike/types'
 
export async function onPageTransitionStart(pageContext: Partial<PageContextClient>) {
  console.log('Page transition start')
  console.log('Is backwards navigation?', pageContext.isBackwardNavigation)
  document.body.classList.add('page-transition')
}

// /pages/+onPageTransitionEnd.ts
// Environment: browser
 
import type { PageContextClient } from 'vike/types'
 
export async function onPageTransitionEnd(pageContext: PageContextClient) {
  console.log('Page transition end')
  console.log('Is backwards navigation?', pageContext.isBackwardNavigation)
  document.body.classList.remove('page-transition')
}

Without `vike-{react,vue,solid}`

If you don't use a UI framework Vike extension vike-react/vike-vue/vike-solid, then make sure to use Client Routing: the onPageTransitionStart() hook requires it (it's executed upon client-side navigation).

See also