Vue的動畫並沒有非常炫酷的效果，不過也是有一些實用性的，在項目中有的地方使用，也是能夠營造出不同的效果
下面為大家列舉個簡單實現動畫的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script rel="script" src="js/vue-2.4.0.js"></script>
<link rel="stylesheet" href="css/animate.css">
<style>
li{
border: 1px dashed #999;
margin: 5px;
line-height: 35px;
font-size: 14px;
padding-left: 5px;
width: 100%;
}
li:hover{
background-color: hotpink;
transition: all 0.5s ease;
}
.v-enter,.v-leave-to{
opacity: 0;
transform: translateY(80px);
}
.v-enter-active,.v-leave-active{
transition: all 0.6s ease;
}
/*v-move 和 v-leave-active 配合使用，能夠實現列表后續的元素，漸漸地漂上來的效果 */
.v-move{
transition: all 0.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>
<!--在實現列表過渡時，如果需要過渡的元素是通過v-for渲染出來的，不能使用
transition 包裹，需要使用 transition-group -->
<!--若需要為 v-for 循環創建的元素設置動畫，必須為每一個元素設置 :key 屬性-->
<transition-group>
<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:1,name:'趙高'},
{id:2,name:'秦檜'},
{id:3,name:'嚴嵩'},
{id:4,name:'魏忠賢'},
],
},
methods : {
add(){
this.list.push({ id :this.id,name : this.name});
this.id = this.name = '';
},
del(i){
this.list.splice(i,1);
},
}
});
</script>
</body>
</html>重點！重點！重點！
<!-- 【appear】 給 transition-group 添加入場效果-->
<!--
通過 tag 屬性，指定transition-group 渲染 為指定的元素
若不指定，則默認為渲染為 span 標簽
-->
<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>這樣就OK了~~
溫馨提示，筆者用這個也是踩了很多坑，下面是我遇到坑的解決辦法。
列表項移除過渡動畫作用在最后一個元素的bug
綁定key鍵值的地方一定不能是下標！只要是一個不重復的數據綁定就可以，比如ID之類的。