具有 javascript 钩子的 Nuxt 可重用动态自定义页面转换？

Question

我有一个 Nuxt.js 网站，我正试图在该网站上进行一些精美的页面转换。我想我明白你应该如何使用 transition 设置，但它只是 CSS，但我如何使它可以通过 JavaScript 挂钩重复使用？

在我看来我们应该能够做这样的事情：

// In a Page.vue template 
    transition(to, from) {
        if (!from) {
            return "fade"
        }
        if (to.name == "directors-name-work") {
            // Animate to video playing
            return "to-video"
        }
        if (from.name == "directors-name-work") {
            // Scroll to slideshow, and at same video we just came from.
            return "from-video"
        }
    }

然后我需要能够在 JavaScript 的某个地方定义 to-video 和 from-video 的 JS 挂钩，但我不知道它在哪里？ enter() 和 beforeEnter() 挂钩在哪里为单独的转换定义？如果我们只有一个过渡是有意义的，那么我可以在混合中完成。但是当它是动态的时候我就不知道了。

有没有我应该放在名为 transition-to-video 和 transition-from-video 的地方的文件？

Answer 1

它目前没有记录，但是页面 transition function can return a transition object, which may include the transition JavaScript hooks。这允许您在公共文件中定义共享过渡对象，并根据需要将它们导入页面：

^{~/transitions.js:}

export default {
  fade: {
    name: 'fade',
    mode: 'out-in',
    beforeEnter(el) {
      console.log('fade beforeEnter')
    }
  },
  bounce: {
    name: 'bounce',
    afterEnter(el) {
      console.log('bounce afterEnter')
    }
  },
}

^{~/pages/about.vue:}

<script>
import transitions from '~/transitions'

export default {
  transition(to, from) {
    return to.query.fade ? transitions.fade : transitions.bounce
  },
}
</script>

具有 javascript 钩子的 Nuxt 可重用动态自定义页面转换？

Nuxt reusable dynamic custom page transition with javascript hooks?

vue.js

transition

nuxt.js

reusability