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

首页课程实战体系课手记专栏慕课教程

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

来源：4-8 歌手详情页路由过渡效果实现

wubin_work

2021-10-13

黄老师您好，以上是我本地的效果图，我按照视频上敲的（也尝试过修改动画时长，但是退出依然闪一下就没了。。），结果发现只有进入动画正常，退出动画一闪就没了，请问这是我哪里出了问题。。
以下是我路由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)
}

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

写回答

2回答

ustbhuangyi

ustbhuangyi

2021-12-19

已采纳

//img.mukewang.com/szimg/61be05a609bb332d10060572.jpg

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

0

3

qq_再见了我的青春_0

回复

ustbhuangyi

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

2022-09-25

共3条回复

ustbhuangyi

ustbhuangyi

2021-10-13

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

0

6

wubin_work

黄老师我升级了vue版本到vue 3.0.11跟您案例里的一样但是问题还是存在。。问题效果gif： https://s2.loli.net/2021/12/17/ceWnsVm8vYub4oE.gif 这个是我的sm.ms图床。。黄老师可以放心打开。。

2021-12-17

共6条回复

Vue3开发企业级音乐Web App 明星讲师带你学大厂代码

慕课网明星讲师黄轶深度讲解 Vue3.0 ，提升的不止是Vue代码能力

2223 学习 · 1002 问题

相似问题

回答 1

请问下老师关于滚动这里一个小问题

回答 2

关于在手机浏览器后退的问题

回答 1

请问下老师进度条相关问题

回答 1

如何手动渲染组件

回答 1

打开慕课网App查看更多内容