vue使用transition标签进场过度不生效可能的原因
现象:用vue自带的transition写了一个过度,奇怪的是进场不生效,出场生效
原因:没有区分 Vue的版本 我是vue3但使用了vue2的写法,所以不生效
解决:
vue2的写法:v-enter/v-leave
vue3的写法:v-enter-from/v-leave-from
代码:一个简单的显隐控制
参考:https://v3.vuejs.org/guide/transitions-enterleave.html
<transition>
<div v-if="isShow"> </div>
</transition>
.v-enter-from, /* vue3*/
.v-leave-to {
opacity: 0;
}
.v-enter-active,
.v-leave-active {
transition: opacity 0.5s;
}