<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js 2.0 transition-group</title>
<style>
.list-li{
width:100px;
height:20px;
transform:translate(0,0);
}
.list-enter,.list-leave-active{
opacity:0;
transform:translate(-30px,0);
}
.list-enter-active,.list-leave-active{
transition:all 0.5s ease;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
</head>
<body>
<div id="app">
<transition-group tag="ul" name="list" appear>
<li v-for="item in items" :key="item.id" class="list-li">
{{item.text}}
</li>
</transition-group>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
items:[
{id:11,text:'11'},
{id:22,text:'22'},
{id:33,text:'33'},
{id:44,text:'44'}
]
}
})
</script>
</body>
</html>注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。