Vue中的动画
- 为什么要有动画:动画能够增加页面趣味性,目的是为了让用户更好的理解页面的功能;
- Vue中的动画,都是简单的过渡动画,并不会有 CSS3 那么炫酷;
Vue中动画的基本介绍
-
每个都动画分为两部分:
- 入场动画:从不可见(flag = false) -> 可见(flag = true)
- 出场动画:可见(flag = true) -> 不可见(flag = false)
-
入场时候,Vue把这个动画,分成了两个时间点和一个时间段:
v-enter
:入场之前v-enter-to
:入场完成以后v-enter-active
:入场的时间段
-
离场时候,Vue把动画,分成了两个时间点和一个时间段:
v-leave
:离场之前v-leave-to
:离场完成以后v-leave-active
:离场的时间段
使用过渡类名
- 把需要添加动画的元素,使用v-if或v-show进行控制
- 把需要添加动画的元素,使用Vue提供的元素
<transition></transition>
包裹起来 - 添加两组类:
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(100px);
}
.v-enter-active,
.v-leave-active{
transition: all 0.5s ease;
}
使用第三方 CSS 动画库
- 把需要添加动画的元素,使用v-if或v-show进行控制
- 把需要添加动画的元素,使用Vue提供的元素
<transition></transition>
包裹起来 - 为
<transition></transition>
添加两个属性类enter-active-class
,leave-active-class
- 把需要添加动画的元素,添加一个
class="animated"
使用动画钩子函数
- 注意:使用
过渡类名
或第三方CSS动画库
实现的过渡动画,都是完整的动画,同时包含了 入场 和 出场 两种状态; - 如果想要实现
半场动画
,只能借助于动画钩子函数来实现
;
v-for 的列表过渡
列表的排序过渡
<transition-group>
组件还有一个特殊之处。不仅可以进入和离开动画,还可以改变定位。要使用这个新功能只需了解新增的 v-move
特性,它会在元素的改变定位的过程中应用。
v-move
和v-leave-active
结合使用,能够让列表的过渡更加平缓柔和:
.v-move{
transition: all 0.8s ease;
}
/*控制要被删除的元素,脱离标准流*/
.v-leave-active{
position: absolute;
}
具体代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
width: 500px;
position: relative;
}
li {
line-height: 45px;
border: 1px dashed #ccc;
font-size: 12px;
padding-left: 15px;
margin: 10px 0;
}
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateY(200px);
}
.v-enter-active,
.v-leave-active {
transition: all 0.8s ease;
}
/* 让 后续 的元素,能够以 过渡的形式,平缓的 顶上去 */
.v-move {
transition: all 0.8s ease;
}
/* 操控的是 即将被销毁的那个元素 */
.v-leave-active {
position: absolute;
width: 100%;
}
</style>
</head>
<body>
<div id="app">
<div>
<input type="text" v-model="name">
<button @click="add">添加</button>
</div>
<!-- 注意:使用 v-for 循环渲染的元素,如果想添加过渡动画,需要使用 transitionGroup 包裹起来 -->
<transition-group tag="ul">
<li v-for="item in list" :key="item.id" @click="remove(item.id)">编号:{{item.id}} -- 姓名:{{item.name}}</li>
</transition-group>
</div>
<script>
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
name: '',
list: [
{ id: 1, name: '嬴政' },
{ id: 2, name: '李斯' },
{ id: 3, name: '吕不韦' }
]
},
methods: {
add() {
const newUser = { id: this.list.length + 1, name: this.name }
this.list.push(newUser)
},
remove(id) {
// 1. 根据Id获取要删除的哪一项的索引
// 2. 调用数组的 arr.splice(索引, 删除的个数)
const index = this.list.findIndex(item => item.id === id)
this.list.splice(index, 1)
}
}
});
</script>
</body>
</html>