12.1动画

1556411553643.png

1556411583327.png

点击显示，隐藏

    
    
看我帅不帅

使用过度类名，实现动画

第一步是将需要动画的元素包裹在transition元素中，transition元素时Vue官方提供的

第二步自定义两组样式

1. v-enter和v-leave-to
2. v-enter-active和v-leave-active

第一组动画是两个时间点，分别是进入之前和退出之后的时间点，也就是在这两个时间点的期间，以什么样的样式显示

第二组动画是两个时间段，也就是入场动画和出场动画的时间段，也就是这个地方选择动画的元素，选择动画作用的事件，选择作用的样式

/**/
/*v-leave-to，也是一个时间点是动画离开之后，离开的 终止状
态，此时元素动画已经结束了*/
 /*  v-enter-active是入场动画的时间 段 ，  */
        /*  v-leave-active是出场动画的时间 段 ，  */

    
    
    
    



    

    
看我帅不帅

transform: translateX(150px);
是动画的位移

transition要求必须带v做前缀

但是也可以改变

.my-enter,
.my-leave-to{
    opacity: 0;
    transform: translateX(150px);
}
.my-enter-active,
.my-leave-active{
    transition: all 0.4s ease-in;
}