`onPageTransitionEnd()` hook

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

// /pages/+onPageTransitionEnd.js
// Environment: browser
 
export { onPageTransitionEnd }
 
// Create custom page transition animations
async function onPageTransitionEnd(pageContext) {
  console.log('Page transition end')
  console.log('Is backwards navigation?', pageContext.isBackwardNavigation)
  document.body.classList.remove('page-transition')
}

TypeScript

// /pages/+onPageTransitionEnd.ts
// Environment: browser
 
export { onPageTransitionEnd }
 
import type { OnPageTransitionEndAsync } from 'vike/types'
 
const onPageTransitionEnd: OnPageTransitionEndAsync = async (
  pageContext
): ReturnType<OnPageTransitionEndAsync> => {
  // ...
}

Don't omit ReturnType<OnPageTransitionEndAsync> otherwise TypeScript won't strictly check the return type.

See API > pageContext > Typescript for more information on how to extend pageContext with your own extra properties.

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 onPageTransitionEnd() hook requires it (it's executed upon client-side navigation).

See also