Nuxt可重用的动态自定义页面转换与javascript挂钩？

Question

我有一个Nuxt.js网站，我正在尝试进行一些精美的页面转换。我想我了解您在仅CSS的情况下应该如何使用transition设置，但是如何使其与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()挂钩在哪里定义？如果我们只有一个过渡，那是有道理的，那么我可以在mixin中完成。但是当它是动态的时，我不知道。

我应该在transition-to-video和transition-from-video处放置一个文件吗？

Answer 1

目前未公开，但是页面的transition function可以返回transition，其中可能包含transition object。这使您可以在公共文件中定义共享的过渡对象，然后根据需要将它们导入页面：

^{~~ transitions.js：}

transition JavaScript hooks

^{〜/ pages / about.vue：}

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