arppear 和 tag属性
arppear :给列表加上入场动画
加上arppear之后会给ul标签里面加上一个 span标签,不符合标准,为了把它去掉,加上tag属性,指明执行动画的元素时ul
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="lib/vue.js"></script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7-dist/css/bootstrap.css">
<style>
li {
border: 1px dashed #ccc;
height: 40px;
width: 100%;
line-height: 40px;
padding-left: 10px;
list-style: none;
}
li:hover {
background-color: hotpink;
transition: all 1s ease
}
/* 动画 */
.v-enter, .v-leave-to {
opacity: 0;
transform: translateY(80px)
}
.v-enter-active, .v-leave-active {
transition: all 1s ease
}
/* 能够实现删除一个列表元素后其他列表元素渐渐飘上来的效果 */
.v-move {
transition: all .8s ease
}
.v-leave-active {
position: absolute;
}
</style>
</head>
<body>
<div id="app">
<label>
id:
<input type="text" v-model="id">
</label>
<label>
name:
<input type="text" v-model="name">
</label>
<button v-on:click="add()">添加</button>
<!-- <ul> -->
<!-- 动态渲染出来的列表必须用 transition-group 标签 -->
<!-- 并且每个渲染出来的必须要绑定一个 key 它的值必须是item里面的属性 -->
<!-- 加一个appear属性可以给这个表格加一个入场动画,但是这样会默认在ul里面加一个span标签
不符合标准,所以要在加一个tag属性,指明ul -->
<transition-group appear tag="ul">
<li v-for="(item, index) in list" v-bind:key="item.id" v-on:click="remove(index)">
{{ item.id }}-----{{ item.name }}
</li>
</transition-group>
<!-- </ul> -->
</div>
<script>
var app = new Vue({
el: '#app',
data: {
id: '',
name: '',
list: [
{
id: 1,
name: '秦桧'
},
{
id: 2,
name: '赵高'
},
{
id: 3,
name: '李斯'
},
{
id: 4,
name: '韩非'
}
]
},
methods: {
add: function () {
this.list.push({id: this.id, name: this.name})
},
remove: function (index) {
this.list.splice(index, 1)
}
}
})
</script>
</body>
</html>