Vue中为列表添加动画 删除添加淡入淡出
2018-11-08 本文已影响61人
___大鱼___
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
li{
border: dashed 1px red;
margin-top: 10px;
height: 30px;
line-height: 30px;
width: 100%;
}
li:hover{
background-color: hotpink;
}
.v-enter,
.v-leave-to{
opacity: 0;
transform: translate(150, 180);
}
.v-enter-active, .v-leave-active{
transition: all 1s ease;
}
.v-move{
transition: all 0.6s ease;
}
.v-leave-active{
position: absolute;
}
</style>
<body>
<div id="app">
id:<input type="text" v-model="id">
name:<input type="text" v-model="name">
<input type="button" value="添加" @click="add">
<!-- 如何要给列表加动画必须要给循环的标签 加上key属性
给<transition-group> appear属性实现页面入场时的效果
通过为 <transition-group> tag属性指定为<transition-group>渲染为什么样的元素
如果不写则渲染为span标签
-->
<transition-group appear tag="ul">
<li v-for="(item, index) in list" :key="item.id" @click="del(index)">
{{item.id}}----------------{{item.name}}
</li>
</transition-group>
</div>
<script>
var app = new Vue({
el: '#app',
data:{
list: [
{'id': 1, name: '椿'},
{'id': 2, name: '湫'},
{'id': 3, name: '大鱼'},
{'id': 4, name: '海棠'},
],
id: '',
name: ''
},
methods: {
add(){
this.list.push({id: this.id, name: this.name})
this.id = this.name = ''
},
del(id){
console.log(id);
this.list.splice(id, 1)
}
},
created: function () {
},
mounted: function () {
}
})
</script>
</body>
</html>
