动画--列表增加删除
动态的增加与删除
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表动画</title>
<script src="../js/vue-2.4.0.js"></script>
<style type="text/css">
li {
border: 1px dashed #aaa;
height: 50px;
line-height: 50px;
transition: all 0.8s ease;
width: 100%;
}
li:hover {
background: hotpink;
}
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateY(80px);
}
.v-enter-active,
.v-leave-active {
transition: all 0.6s ease;
}
.v-move{
transition: all 0.8s ease;
}
.v-leave-active{
position: absolute;
}
</style>
</head>
<body>
<div id="app">
id:<input v-model="id"/>
name:<input v-model="name"/>
<button @click="add()">添加</button>
<!--为多个元素添加动画需要使用transition-group-->
<!--bag 属性：修改transition-group编译后生成的标签名称，默认为span-->
<transition-group appear tag="ul">
<li v-for="(item,index) in userList" :key="item.id" @click="del(index)">
{{item.id}}-----{{item.name}}
</li>
</transition-group>
</div>
<script type="text/javascript">
let vm = new Vue({
el: "#app",
data: {
userList:[
{id:1,name:"刘备"},
{id:2,name:"关羽"},
{id:3,name:"张飞"},
],
id:'',
name:'',
},
methods: {
add() {
let user = {id:this.id,name:this.name};
this.userList.push(user);
this.id = this.name = '';
},
del(index) {
this.userList.splice(index, 1);
}
}
});
</script>
</body>
</html>
调用js文件来引用vue文档，可以直接用下方的代码
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
