API: transition 属性配置

transition 属性配置

  • Type: StringObject

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

默认值:

  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 属性

  • 类型: StringObject

用于设置布局过渡的默认属性。配置与 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,
  2. .layout-leave-active {
  3. transition: opacity 0.5s;
  4. }
  5. .layout-enter,
  6. .layout-leave-active {
  7. opacity: 0;
  8. }