VUE动画

今天我们来学习VUE动画的相关内容。
1.VUE里面没有动画，但是它在元素显示或者隐藏的时候，自动添加了一些样式，可以通过这些样式来制作动画。

• 样式

// 进入整个过程
v-enter-active

// 进入开始
v-enter
// 进入结束
v-enter-to

// 离开整个过程
v-leave-active

// 离开开始
v-leave
// 离开结束
v-leave-to

• transition

name 动画名称

// 进入指定CSS名称
enter-active-class = "animated fadeIn"
// 离开指定CSS名称
leave-active-class = "animated fadeOut"

tip：先link引入animate.min.css

• 实现动画
  1.过渡

原理：一个元素两个状态产生过渡动画

.v-enter-active{transition:all ease 1s}
.v-enter{opacity:0}
.v-enter-active{opacity:1}

2.关键帧动画

// 01 定义关键帧
@keyframes fadeIn{}
// 02 调用
v-enter-active{animate:all}

• transition-group 组动画

1.tag 指定组的html标签
2.name 动画名称
3.组动画循环列表必须有key属性绑定

v-enter-active{}
v-enter{}
v-enter-to{}
v-leave-active{}
v-leave{}
v-leave-to{}

4.v-move{} 正在移动中的元素

.v-leave-active{
position:absolute;
}
.v-move{
transition:all ease 1s;
}

好了，今天的分享就到这里了！
愿你三冬暖，愿你春不寒；愿你天黑有灯，下雨有伞。

小晴天