Nuxt.js：结合过渡（到，从）和进入/离开事件答案

【问题标题】：Nuxt.js : combine transition(to, from) and enter / leave eventsNuxt.js：结合过渡（到，从）和进入/离开事件
【发布时间】：2019-11-15 14:19:49
【问题描述】：

所以我有这段代码，它决定了在两个页面之间的过渡上做什么，并且效果很好：

export default {
  transition: {
    mode: 'out-in',
    css: false,
    beforeEnter (el) {
      console.log('set transition');
    },
    enter (el, done) {
      console.log('enter transition');
      done();
    },
    leave (el, done) {
      console.log('leave transition');
      done();
    },
  }
}

现在我想根据下一页的内容指定要执行的操作。所以我要根据documentation使用transition(to, from)方法。但不幸的是，我不能将此函数与mode: 'out-in' 之类的参数混合使用，也无法使用to, from 参数调用leave(el, done) 函数。

有谁知道如何结合这个？谢谢。

【问题讨论】：

标签： vue.js transition nuxt.js

【解决方案1】：

也许你找到了解决方案，但我设法将转换与路由（到、从）和对象转换结合起来。

让我解释一下：

如果您查看 vue 的 TypeScript 声明，尤其是 ComponentOptions 接口 (node_modules/@nuxt/types/app/vue.d.ts)

这就是我们所拥有的：

declare module 'vue/types/options' {
  // eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
  interface ComponentOptions<V extends Vue> {
    // eslint-disable-next-line @typescript-eslint/ban-types
    asyncData?(ctx: Context): Promise<object | void> | object | void
    fetch?(ctx: Context): Promise<void> | void
    fetchKey?: string | ((getKey: (id: string) => number) => string)
    fetchDelay?: number
    fetchOnServer?: boolean | (() => boolean)
    head?: MetaInfo | (() => MetaInfo)
    key?: string | ((to: Route) => string)
    layout?: string | ((ctx: Context) => string)
    loading?: boolean
    middleware?: Middleware | Middleware[]
    scrollToTop?: boolean
    transition?: string | Transition | ((to: Route, from: Route | undefined) => string | Transition)
    validate?(ctx: Context): Promise<boolean> | boolean
    watchQuery?: boolean | string[] | ((newQuery: Route['query'], oldQuery: Route['query']) => boolean)
    meta?: { [key: string]: any }
  }
}

transition 属性定义如下：

transition?: string | Transition | ((to: Route, from: Route | undefined) => string | Transition)

因此，通过使用函数方法，您必须给出一个字符串或一个 Transition 对象。

例子：

transition(to, from) {
  if(!from) {
    // returns a string
    return 'my-custom-css-animation';
  }

  // returns an object Transition
  return {
    name: 'custom',
    appear:false,
    css: false,
    beforeLeave() {
      // before leave hook
    },
    leave(el, done) {
      // leave hook

    },
    beforeEnter(el) {
      // before enter hook

    },
    enter(el, done) {
      // Enter hook
    }
  }
}

【讨论】：

【解决方案2】：

您应该改用pageTransition。

您是否尝试过使用函数？

export default {
  pageTransition (to, from) {
    if (!from) { return 'slide-left' }
    return +to.query.page < +from.query.page ? 'slide-right' : 'slide-left'
  }
}

文档在这里：https://fr.nuxtjs.org/api/pages-transition/#fonction

【讨论】：

感谢您的回答，我正在使用此代码，但是如何将此功能与我的离开事件功能结合使用？如何在 leave (el, done) 函数中获取 pageTransition 函数的“to”值？
在 Nuxt 配置中，如果“pageTransition”是一个函数，它似乎不起作用。不知道为什么。只有当它是一个对象时才有效。
@Mig 我在页面中使用此代码，而不是在 nuxt.config.js 中。您使用哪个版本的 nuxt？
@ManUtopiK 它在页面中也适用于我，尽管该属性当时称为“过渡”。但是在具有全局“pageTransition”等效项的 Nuxt.config.js 中，我只能使用一个对象。功能在那里不起作用。我的版本是 2.13.3。