vue组件封装的动画

78 阅读1分钟

先来看看官方文档是怎么做的动画的过度,即消失与出现的动画 image.png

其实就是动态切换这六个类,使用时的用法,如果不写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;  
}