`+onPageTransitionStart()` hook

Environment: client

Local

Non-cumulative

Provided by: vike

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

// /pages/+onPageTransitionStart.js
// Environment: client
 
export async function onPageTransitionStart(pageContext) {
  console.log('Page transition start')
  console.log('Is backwards navigation?', pageContext.isBackwardNavigation)
  document.body.classList.add('page-transition')
}

// /pages/+onPageTransitionStart.ts
// Environment: client
 
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.js
// Environment: client
 
export async function onPageTransitionEnd(pageContext) {
  console.log('Page transition end')
  console.log('Is backwards navigation?', pageContext.isBackwardNavigation)
  document.body.classList.remove('page-transition')
}

// /pages/+onPageTransitionEnd.ts
// Environment: client
 
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).

+onPageTransitionStart() hook

Without vike-{react,vue,solid}

See also

`+onPageTransitionStart()` hook

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