• transition 属性配置
  • layoutTransition 属性

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