[英]Nuxt.js - For each route a different transition
我目前正在使用 Nuxt.js,这太棒了! 我为我创建的每个页面做了一些转换。 但是,当您从存档转到页面时,我想调用特定的转换。 例如:
在存档中,您有两个 a href,每个 a href 都转到另一个页面。 因此,您有不同的路线,例如:存档->第1页和存档->第2页。我想在存档离开第1页和第2页时为存档进行过渡。我需要为每条路线调用特定的过渡. 但是我在文档中找不到任何东西是如何工作的。 有人有想法或例子吗?
我认为你在正确的轨道上。
本质上,您只想将转换键作为函数调用。 将“发件人”视为存档页面,将“收件人”视为下一页。 你可以这样做:
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'.
你可以把这个转换函数放在你的模块导出中,就像你的生命周期钩子一样。 这有点帮助吗?
如果你使用布局,在<nuxt/>
之间插入<transition>
就足够了。 请参考vue官方文档
模板
<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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.