vue中列表的过渡

<style>
　　.v-enter,.v-leave-to{
　　　　opacity: 0;
　　}
　　.v-enter-active,.v-leave-active{
　　　　transition: opacity 1s;
　　}
</style>
<div id='app'>
　　<transition-group>
　　　　<div v-for="item of list" :key='item.id'>
　　　　　　{{item.title}}
　　　　</div>
　　</transition-group>
　　<button @click='handleClick'>Add</button>
</div>

<script>
var count = 0;
var vm = new Vue({
　　el:'#app',
　　data:{
　　　　list:[]
　　},
　　methods:{
　　　　handleClick:function(){
　　　　　　this.list.push({
　　　　　　　　id: ++count,
　　　　　　　　title:'hello world'
　　　　　　})
　　　　}
　　}
})
</script>

列表的过渡动画主要由这个标签transition-group实现，他的原理就是，每次增加一个div,就会包裹一层transition，代码是这样

<transition>
　　<div>hello world</div>
</transition>
<transition>
　　<div>hello world</div>
</transition>
<transition>
　　<div>hello world</div>
</transition>
<transition>
　　<div>hello world</div>
</transition>
<transition>
　　<div>hello world</div>
</transition>

add一下，加一个transition，然后会自动加上对应的class,v-enter,v-leave-to,v-enter-active,v-leave-active