API: transition 属性配置

transition 属性配置

  • Type: String 或 Object

用于设置页面切换过渡效果的默认属性值。

默认值：

  1. {
  2.   name: 'page',
  3.   mode: 'out-in'
  4. }

例如 (nuxt.config.js)：

  1. module.exports = {
  2.   transition: 'page'
  3.   // or
  4.   transition: {
  5.     name: 'page',
  6.     mode: 'out-in',
  7.     beforeEnter (el) {
  8.       console.log('Before enter...');
  9.     }
  10.   }
  11. }

transition 用于设置页面切换过渡效果的默认属性值。想了解当 transition 的值为对象类型时有哪些可用的属性，请参考 页面过渡效果配置。

layoutTransition 属性

  • 类型: String 或 Object

用于设置布局过渡的默认属性。配置与 layout 相同

默认:

  1. {
  2.   name: 'layout',
  3.   mode: 'out-in'
  4. }

例如 (nuxt.config.js):

  1. export default {
  2.   layoutTransition: 'layout'
  3.   // or
  4.   transition: {
  5.     name: 'layout',
  6.     mode: 'out-in'
  7.   }
  8. }

全局配置示例 css:

  1. .layout-enter-active, .layout-leave-active {
  2.   transition: opacity .5s
  3. }
  4. .layout-enter, .layout-leave-active {
  5.   opacity: 0
  6. }