Nuxt.js - 每条路线都有不同的过渡

Posted

技术标签:

【中文标题】Nuxt.js - 每条路线都有不同的过渡【英文标题】:Nuxt.js - For each route a different transition 【发布时间】:2018-04-29 19:59:45 【问题描述】:

我目前正在使用 Nuxt.js,这太棒了!我为我创建的每个页面做了一些转换。但是,当您从存档转到页面时,我想调用特定的转换。例如:

在存档中,您有两个 a href,每个 a href 都转到另一个页面。因此,您有不同的路线,例如:存档->第1页和存档->第2页。我想在存档离开第1页和第2页时为存档进行过渡。我需要为每条路线调用特定的过渡.但我在文档中找不到任何东西是如何工作的。有人有想法或例子吗?

【问题讨论】:

Nuxt 是建立在 Vue.js 之上的,对吧?你不能把你的路由包装成一个普通的 vue 转换并根据你的路由动态命名它吗? vuejs.org/v2/guide/transitions.html 是的,问题是我无法弄清楚如何更改每条路线上的过渡名称......它必须是这个功能的东西:nuxtjs.org/api/pages-transition#function 【参考方案1】:

我认为你在正确的轨道上。

本质上,您只想将转换键作为函数调用。将“发件人”视为存档页面,将“收件人”视为下一页。你可以这样做:

transition (to, from) 
  if (to.path === '/page-1')
      return 'transition-one' 
   else if (to.path === '/page-2') 
      return 'transition-two'
  

或者在伪代码中...

// If the 'to' path is the same as /path-1
    // Do the transition with the name 'transition-one'
// Otherwise, if the 'to' path is the same as /path-2
    // Do the transition with the name 'transition-two'.

你可以把这个转换函数放在你的模块导出中,就像你的生命周期钩子一样。这有点帮助吗?

【讨论】:

谢谢!它对我不起作用,但它确实有意义。但它仍然调用标准的“页面”过渡而不是“过渡一”或“过渡二”。 什么是'transition-one'和'transition-two'? CSS 类?【参考方案2】:

如果你使用布局,在<nuxt/>之间插入<transition>就足够了。 请参考vue official doc

完成

 <v-content>
  <transition name="fade">
    <nuxt />
  </transition>
</v-content>

css

.fade-enter-active, .fade-leave-active 
  transition: opacity .5s;

.fade-enter, .fade-leave-to 
  opacity: 0;

【讨论】:

以上是关于Nuxt.js - 每条路线都有不同的过渡的主要内容,如果未能解决你的问题,请参考以下文章

Nuxt.js入门安装及灵活使用

Nuxt.js:页面转换

JS——Nuxt 基础知识

Nuxt.js 和内容丰富的网站无法正确生成动态路由

Nuxt.js:无法生成路由

使用 Nuxt.js 进行开发和生产的不同 baseURL