Question

我认为Nuxt 2.4.x在过渡过程中存在错误。

模板中的示例：

<transition
    appear //---> this never work
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:after-enter="afterEnter"

    v-on:leave="leave">
   ....
  </transition>

在脚本中：

   transition: {
    mode: 'out-in',
    css: false,
    beforeEnter (el) {
      console.log('before in transition object') // works
    },
    enter (el, done) {
      console.log('enter in transition object') // works
    },
    afterEnter (el) {
      console.log('after enter in transition object') // works
    },
    leave (el, done) {
      console.log('leave in transition object') // works
      done()
    }
  },

  methods: {
    // https://nuxtjs.org/api/pages-transition
    // https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks
    beforeEnter (el) {
      console.log('before in methods object') // never executed
    },
    enter (el, done) {
      console.log('enter in methods object') // never executed
    },
    afterEnter (el) {
      console.log('after enter in transition object') // never executed
    },
    leave (el, done) {
      console.log('leave in methods object') // never executed
    },
  }

如果删除 methods object中的所有方法，则会出现以下错误：

commons.app.js：9837 [Vue警告]：属性或方法“ beforeEnter”为   未在实例上定义，但在渲染期间被引用。确保   该属性是反应性的，无论是在data选项中，还是在   通过初始化属性，基于类的组件。看到：   https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

位于

--->页面/about.vue                       在layouts / default.vue               commons.app.js：9837 [警告]：属性或方法“输入”未在实例上定义，但在渲染期间被引用。   在data选项中，确保此属性是反应性的，   或对于基于类的组件，通过初始化属性。看到：   https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

位于

--->页面/about.vue                       在layouts / default.vue

以此类推...

有什么想法吗？

Answer 1

根据您提供的信息，我希望您注意一些事情。

如果您参考nuxt文档here，则会注意到transition属性将控制页面之间移动时页面组件的行为。也就是说，每次您从一条路线转到另一条路线时。

您要在组件内部定义的方法是当vue docs here中所述的过渡发生时，过渡组件将调用的函数。这就是为什么您会收到该错误

现在，我认为您的转换无法正常进行，因为您还没有命名。它将使您对过渡的操作有更多的控制。您还需要添加一些CSS，以使过渡有效。

如果您查看上面的图表，您会发现纯CSS过渡是如何从一种状态变为另一种状态的。

我还会推荐您参考Sarah Drasner的this amazing article，该书讨论了页面转换

Nuxt JavaScript挂钩过渡-一个错误？

1 个答案: