黄老师为何我的transition组件只有进入动画生效，退出动画无效？

Question

黄老师您好，以上是我本地的效果图，我按照视频上敲的（也尝试过修改动画时长，但是退出依然闪一下就没了。。），结果发现只有进入动画正常，退出动画一闪就没了，请问这是我哪里出了问题。。
以下是我路由singer组件的代码:

 <router-view v-slot="{ Component }">
    <transition name="slide" appear>
        <component :is="Component" :singer="selectedSinger" />
    </transition>
  </router-view>

base.scss中过度样式：

//全局定义过度动画效果
.slide-enter-active, .slide-leave-active {
  transition: all 0.3s
}

.slide-enter-from, .slide-leave-to {
  transform: translate3d(100%, 0, 0)
}

百思不得其解，求黄老师帮助。。（也比较过最终源码，发现基本一样啊。。）

Answer 1

ustbhuangyi 2021-12-19 00:01:00

这个注释删除了就可以，原因回头我具体写一篇文章来分析

• 提问者 wubin_work #1

  好的黄老师！太感谢黄老师了！这问题困扰我好几天了~~ 请问到时您的文章会发布在哪个平台？也好及时的关注下~~

• ustbhuangyi 回复 提问者 wubin_work #2

  明天会在我的公众号里发布，关注《老黄的前端私房菜》

• qq_再见了我的青春_0 回复 ustbhuangyi #3

  是因为注释的问题吗 我试试加个注释 并没有出现没动画的情况 没出现动画是啥原因

Answer 2

ustbhuangyi 2021-10-13 15:24:13

你的 Vue.js 3.x 的具体版本是多少

• 提问者 wubin_work #1

  黄老师，我的vue版本是3.0.0
  dependencies": {
      "core-js": "^3.6.5",
      "vue": "^3.0.0",
      "vue-router": "^4.0.0-0",
      "vuex": "^4.0.0-0",
      "axios": "^0.21.1",
      "@better-scroll/core": "^2.4.1",
      "@better-scroll/slide": "^2.4.1",
      "@better-scroll/observe-dom": "^2.4.1",
      "vue3-lazy": "^1.0.0-alpha.1",
      "good-storage": "^1.1.1"
    },

• 提问者 wubin_work #2

  我是需要再升级下版本吗？

• ustbhuangyi 回复 提问者 wubin_work #3

  先看安装到 node_modules 里的版本是多少，或者看 package-lock 里的 Vue.js 版本

点开查看后面3条评论