Page Transition

You can define transition in three ways to apply transition on page navigation:

  1. Page component option: transition
  2. Page attribute: transition
  3. Layout component option: transition

Priority: 1 > 2 > 3.

For example, you can use the component option:

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
  }
}

Or use the page attribute transition, 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;
}
Last Edited on June 24, 2019 Edit This Page on GitHub