先来看看官方文档是怎么做的动画的过度,即消失与出现的动画
其实就是动态切换这六个类,使用时的用法,如果不写name就会使用vue默认的动画,一般使用时都是会使用默认的动画,有特殊的动画需求再去自己写css
//如果不写name就会使用vue默认的动画
<transition name="fade">
<p v-if="show">hello</p>
</transition>
//CSS 类名-enter-active 这样子使用
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}