Page Transition

You can use the component option transition in a .vue or .js page to apply page-level transition effect:

export default {
  // Can be a string
  transition: 'slide-left',
  // Or an object
  transition: {
    name: 'slide-left'
  },
  // or a function
  transition (to, from) {
    // return a string or object
  }
}

Alternatively you can use page attribute transition as well, this is useful if you just want to use front matter:

# A string
transition: string
# Or object
transition:
  name: string
  mode: string

Note that you can NOT use a function as transition in page attribute

All the props of Vue's built-in <transition> component can be used in our transition object:

Property Type Default Description
name string page Used to automatically generate transition CSS class names. e.g. name: 'fade' will auto expand to .fade-enter, .fade-enter-active, etc.
appear boolean false Whether to apply transition on initial render.
css boolean true Whether to apply CSS transition classes. If set to false, will only trigger JavaScript hooks registered via component events.`
type string N/A Specifies the type of transition events to wait for to determine transition end timing. Available values are transition and animation. By default, it will automatically detect the type that has a longer duration.`
mode string out-in Controls the timing sequence of leaving/entering transitions. Available modes are out-in and in-out.
duration number N/A Specifies the duration of transition.
enterClass string N/A See Vue.js docs.
enterToClass string N/A See Vue.js docs.
enterActiveClass string N/A See Vue.js docs.
leaveClass string N/A See Vue.js docs.
leaveToClass string N/A See Vue.js docs.
leaveActiveClass string N/A See Vue.js docs.

You can also define methods in the transition, these are for the JavaScript hooks:

  • beforeEnter(el)
  • enter(el, done)
  • afterEnter(el)
  • enterCancelled(el)
  • beforeLeave(el)
  • leave(el, done)
  • afterLeave(el)
  • leaveCancelled(el)

The default transition name is page, so you can directly define following CSS to apply transition to all pages:

.page-enter-active, .page-leave-active {
  transition: opacity .5s;
}
.page-enter, .page-leave-to {
  opacity: 0;
}