12.2使用animate.css

使用过度类名,实现动画

第一步是将需要动画的元素包裹在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是出场动画的时间 段 ,  */



    
    Title
    
    


看我帅不帅

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;
}

你可能感兴趣的:(12.2使用animate.css)