Vue/Nuxt 页面转换不工作答案

【问题标题】：Vue/Nuxt page transition leave not workingVue/Nuxt 页面转换不工作
【发布时间】：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

【问题讨论】：

嗨，我的回答有帮助吗？

标签： vue.js vue-component nuxt.js vue-router vue-transitions

【解决方案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;
}

【讨论】：