如下代码,可以自定义css中的v,比如改成para,在transition中添加name="para"即可;
如果css来自于外部并且无法修改css名,可以使用enter-to-class/enter-active-class指定css;
<div class="container">
<transition name="para" enter-to-class="" enter-active-class="">
<p v-if="paraIsVisible">This is only sometimes visible...</p>
</transition>
<button @click="toggleParagraph">Toggle Paragraph</button>
</div>
.para-enter-from {
/* opacity: 0;
transform: translateY(-30px); */
}
.para-enter-active {
/* transition: all 0.3s ease-out; */
animation: slide-fade 0.3s ease-out;
}
.para-enter-to {
/* opacity: 1;
transition: translateY(0); */
}
.para-leave-from {
/* opacity: 1; */
}
.para-leave-active {
animation: slide-fade 0.3s ease-out;
}
.para-leave-to {
/* opacity: 0;
transform: translateY(-30px); */
}