前面给大家介绍了动画的基本使用，本文我们来实现一个动画的简单案例，效果如下
在这里插入图片描述
Vue动画案例
1.基础页面
最基础的页面如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-">
<meta name="viewport" content="width=device-width, initial-scale=.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-.4.0.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
},
methods: {
}
})
</script>
</body>
</html>
2.添加数据
添加一个基本的列表数据，此处使用到 v-for 指令来循环取数据
在这里插入图片描述
效果:
在这里插入图片描述
3.设置样式
给 li 标签设置对应的样式。
<style>
li{
border:px dashed red;
margin-top:px;
line-height:px;
padding-left:px;
}
</style>
效果
在这里插入图片描述
4.添加背景动画
给列表数据添加一个鼠标滑过的 hover 动画效果
<style>
li{
border:px dashed red;
margin-top:px;
line-height:px;
padding-left:px;
}
/*鼠标滑过的动画*/ li:hover{
background-color: aquamarine;
transition: all.8s ease;
}
</style>
效果
在这里插入图片描述
5.添加数据
增加一个给列表添加数据功能，之前已经实现过了，代码如下
在这里插入图片描述
在这里插入图片描述
效果
在这里插入图片描述
6.添加数据动画
上面的效果功能是实现了，但是效果比较生硬，我们可以加上动画效果，要使用动画之前我们使用的是 transition 标签，但是现在是在 v-for 中循环遍历的多个 li 标签中 我们需要使用 transition-group 标签来包裹.
在这里插入图片描述
动画代码
在这里插入图片描述
效果
在这里插入图片描述
有了一个列滑动入场的效果~
7.删除数据
当我们点击某行数据的时候将这行移除掉，先给 li 绑定一个点击事件，然后del方法中移除当前行
在这里插入图片描述
效果
在这里插入图片描述
如上，移除有些停顿，不是太好，我们可以加如下两个动画来实现。
在这里插入图片描述
效果
在这里插入图片描述
移除一个列的时候，下面的列有往上飘的效果~
8.appear和tag属性
我们在刷新页面，第一次进来的时候，列表没有入场动画，这时我们可以添加一个 appear属性来设置
在这里插入图片描述
最后 transition-group中还有一个 tag属性，用来设置包裹的标签，先来看没有tag的效果
在这里插入图片描述
我们使用tag属性来试试
在这里插入图片描述
在这里插入图片描述
这样就没有 span 中间的 标签了。
最后完成的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-">
<meta name="viewport" content="width=device-width, initial-scale=.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/ Vue -2.4.0.js"></script>
<style>
li{
border:px dashed red;
margin-top:px;
line-height:px;
padding-left:px;
}
/*鼠标滑过的动画*/ li:hover{
background-color: aquamarine;
transition: all.8s ease;
}
/**动画初始和结束的时候*/ .v-enter
,.v-leave-to{
opacity:;
transform: translateY(px);
}
/**入场和离场中*/ .v-enter-active,
.v-leave-active{
transition: all.8s ease;
}
/* .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */ .v-move {
transition: all.6s ease;
}
.v-leave-active{
position: absolute;
}
</style>
</head>
<body>
<div id="app">
<div>
<label>
Id:
<input type="text" v-model="id">
</label>
<label>
Name:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
</div>
<!--<ul>-->
<transition-group appear tag="ul">
<li v-for="(item,i) in list" :key="item.id" @click="del(i)">
{{item.id}} ---- {{item.name}}
</li>
</transition-group>
<!--</ul>-->
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
id:'',
name:'',
list:[
{id:,name:"java"},
{id:,name:"Vue"},
{id:,name:"Php"},
{id:,name:"c#"}
]
},
methods: {
add(){
this.list.push({id:this.id,name:this.name})
this.id=this.name=''
},
del(i){
this.list.splice(i,)
}
}
})
</script>
</body>
</html>