Vue.js v-show搭配transition淡入失效淡出正常问题求助

问题根因 #

你使用的是Vue3（引入的vue@next为Vue3版本），但过渡CSS类混用了Vue2的语法，导致进入动画的初始状态未生效。 #

具体错误点 #

• Vue3的进入阶段起始状态类名为[name]-enter-from，而非Vue2的[name]-enter，你写的.slide-fade-enter类Vue3无法识别，元素进入时初始透明度就是1，没有渐变过程
• 过渡属性仅配置了opacity的过渡规则，未包含transform，就算类生效也不会有位移动画
• 不需要给slide-fade-enter-from加transition属性，过渡规则仅需要配置在*-enter-active和*-leave-active类上即可

修复方案 #

将你的过渡CSS替换为以下代码即可：

/*Vue JS CSS Components*/
.slide-fade-enter-active,
.slide-fade-leave-active {
    transition: all 0.5s ease;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
    transform: translateX(10px);
    opacity: 0;
}

你之前退出动画正常是因为slide-fade-leave-to类的命名符合Vue3规范，所以只有进入动画异常，替换后淡入淡出加位移动画都会正常生效。

内容的提问来源于stack exchange，提问作者Eric Conklin