<!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/animate.css">
<style>
li {
border: 1px dashed #999;
margin: 5px;
line-height: 35px;
padding-left: 5px;
font-size: 15px;
}
li:hover{
background-color: pink;
transition:all 0.4s ease
}
.v-enter,.v-leave-to{
opacity: 0;
transform: translateY(80px);
}
.v-enter-active,.v-leave-active{
transition:all 0.8s 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 for="">
Id:
<input type="text" v-model="id">
</label>
<label for="" >
Name:
<input type="text" v-model="name">
</label>
<input type="button"value="添加" @click.key="add">
</div>
<!-- 在實現列表過渡的時候,如果需要過渡的元素是通過v-for循環渲染出來的不能使用transition包裹 -->
<!-- 需要使用transitionGroup -->
<!-- 如果要爲v-for循環創建的元素設置動畫,必須爲每一個元素設置:key屬性 -->
<!-- 添加appear屬性,實現入場時候的效果 -->
<!-- 爲transition-group設置tag屬性,指定transition-group渲染爲指定的元素,如果不指定默認渲染爲span標籤,不符合規範 -->
<transition-group appear tag="ul">
<!-- 點擊Li刪除的時候,被刪除的列表寬度變小了,所以設置一個width="100%" -->
<li v-for="(item,i) in list" :key="item.id" @click=del(i) width="100%">
{{item.id}}{{item.name}}
</li>
</transition-group>
</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>
Vue——17——列表動畫
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
vue在history的路由模式下，刷新後界面報404
需要配置下nginx，位置在/conf/vhosts/*.conf，將當前目錄下的所有conf都修改一下最好 server { listen 80; server_name agwenb