SABER--10 Page Transition

你可以用三种方式定义transition来应用跳转给每个页面导航中。

1. 页面组件选项：transition
2. 页面属性：transition
3. 布局组件选项：transition
   优先级：1 > 2 > 3
   例如，你可以使用组件选项：

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

或者使用页面属性transition，如果你想使用front matter，这将会很有用。

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

注意：你不能把函数作为transition在页面属性中使用。
所有Vue内置的 <transition>组件的支持都可以被用来在我们transition对象中：

属性	类型	默认值	描述
name	string	page	用来自动化地生成transition CSS类名。例如：name: 'fade’会自动扩展为==.fade-enter==，.fade-enter-active, 等。
appear	boolean	false	是否在初始化的渲染中应用transition
css	boolean	true	是否应用CSS transition类。如果设置为false，通过组件活动将会激发注册的javaScript钩子。
type	string	N/A	指定要等待的转换事件类型以确定转换结束时间。可用的值是transition和animation。默认情况下，它将自动检测持续时间较长的类型。
mode	string	out-in	控制离开/进入转换的时序。可用的模式有out-in和in-out。
duration	number	N/A
enterClass	string	N/A
enterToClass	string	N/A
enterActiveClass	string	N/A
leaveClass	string	N/A
leaveToClass	string	N/A
leaveActiveClass	String	N/A
你也可以在transition中定义方法：

• beforeEnter(el)
• enter(el, done)
• afterEnter(el)
• enterCancelled(el)
• beforeLeave(el)
• leave(el, done)
• afterLeave(el)
• leaveCancelled(el)
  默认的transition名称是page，所以你可以直接定义下面的CSS来将过渡应用到所有页面：

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