Nuxt.js transition 属性配置

transition 属性配置

  • Type: String 或 Object

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

默认值:

{
  name: page,
  mode: out-in
}

例如 (nuxt.config.js):

module.exports = {
  transition: page
  // or
  transition: {
    name: page,
    mode: out-in,
    beforeEnter (el) {
      console.log(Before enter...);
    }
  }
}

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

layoutTransition 属性

  • 类型: String 或 Object

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

默认:

{
  name: layout,
  mode: out-in
}

例如 (nuxt.config.js):

export default {
  layoutTransition: layout
  // or
  transition: {
    name: layout,
    mode: out-in
  }
}

全局配置示例 css:

.layout-enter-active, .layout-leave-active {
  transition: opacity .5s
}
.layout-enter, .layout-leave-active {
  opacity: 0
}

作者:andy,如若转载,请注明出处:https://www.web176.com/nuxt/22357.html

(0)
打赏 支付宝 支付宝 微信 微信
andy的头像andy
上一篇 2023年5月24日
下一篇 2023年5月24日

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注