今天我们来学习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;
}
好了,今天的分享就到这里了!
愿你三冬暖,愿你春不寒;愿你天黑有灯,下雨有伞。
![7861972-c15692bc3ce6fc3a.jpg](https://i-blog.csdnimg.cn/blog_migrate/ba985222f701324db7cb9077569ad267.jpeg)
小晴天