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>