<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<body>
<style>
ul li{
width: 300px;
text-decoration: none;
margin: 5px 0px;
border: 1px solid black;
}
ul li{
list-style: none;
}
ul li:hover{
background-color: hotpink;
}
/* 过度类动画 */
/* 动画进入前 元素移动到Y轴80px 不透明 离开后还会移动到80px这里操作就是translate
说明 如果定义rotate 那就在enter-active 是旋转的效果*/
.v-enter,
.v-leave-to {
opacity: 0;
transform: rotate(180deg);
}
/* 开始动画的时候，动画会移动到原来的位置 执行过度效果*/
.v-enter-active,
.v-leave-active {
transition: all 0.6s ease;
}
</style>
<div class="container">
<div>
<label for="">
Id:
<input type="text" v-model="id" >
</label>
<label for="">
Name:
<input type="text" v-model="name" >
</label>
<input type="button" value="添加" v-on:click="add">
</div>
<!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup -->
<!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性 -->
<!-- 给 transition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果 -->
<!-- 通过 为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认，渲染为 span 标签 -->
<!-- transition-group中也可以写钩子函数 但是有点问题 我还没解决 -->
<!--v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter" -->
<transition-group appear tag="ul"
>
<li v-for="(item, index) in listName" :key="item.id"
@click="del(index)">{{item.id}}---------{{item.name}}--------{{item.number}}
</li>
</transition-group>
</div>
<script>
var vm=new Vue({
el:'.container',
data:{
id:'',
name:'',
listName:[
{id:'1',name:'时尚网吧',number:'2019'},
{id:'2',name:'怪兽电竞',number:'2017'},
{id:'3',name:'银河网络',number:'2017'}
]
},
methods: {
// 添加函数
add(){
this.listName.push({id:this.id,name:this.name,number:'2019'});
this.id=this.name='';
},
// 删除函数
del(i){
this.listName.splice(i,1);
},
// // 动画生命周期函数
// beforeEnter(el){
// el.style.transform="translateY(80px)";
// el.style.opacty=0
// },
// enter(el,done){
// el.offsetHeight
// el.style.transition="all 0.4s ease"
// done()
// },
// afterEnter(el){
// el.style.transform="translateY(0)"
// },
},
})
</script>
</body>
</html>
