Vue/Nuxt 页面转换不工作
Posted
技术标签:
【中文标题】Vue/Nuxt 页面转换不工作【英文标题】:Vue/Nuxt page transition leave not working 【发布时间】:2022-01-23 18:04:41 【问题描述】:所以我尝试在 css 上进行页面转换,但 leave
转换不起作用,所以我尝试使用 JS Hooks
进行转换,但留下动画仍然不起作用。我尝试评论每一步,发现leave
甚至没有被调用。
脚本:
methods:
beforeEnter: function (el)
console.log("Before Enter")
// ...
,
enter: function (el, done)
console.log("Entered")
// ...
,
leave: function (el, done)
console.log("Leave")
// ...
模板:
<div id="app">
<nav-bar />
<transition
mode="out-in"
@before-enter="beforeEnter"
@enter="enter"
@leave="leave"
>
<nuxt />
</transition>
</div>
我已经阅读了关于转换的documentation,我什至复制了他们的代码并按原样粘贴,但似乎仍然没有区别。我使用了yarn create nuxt-app
,所以你会认为我正在进行最稳定的更新
nuxt: 2.15.8
node: 14.18.1
ubuntu: 18.04.6 LTS
【问题讨论】:
嗨,我的回答有帮助吗? 【参考方案1】:您链接的文档与 Vue3 相关,与 Nuxt2(使用 Vue2)相比,那里的 API 有点不同。 这是你应该look at的那个。
这是迄今为止最容易管理的过渡
<transition name="slide-fade">
<p v-if="show">hello</p>
</transition>
.slide-fade-enter-active
transition: all .3s ease;
.slide-fade-leave-active
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */
transform: translateX(10px);
opacity: 0;
【讨论】:
以上是关于Vue/Nuxt 页面转换不工作的主要内容,如果未能解决你的问题,请参考以下文章
如何从 Laravel 后端获取数据并在 Vue/Nuxt 前端显示