[Vue] 列表过渡

列表过渡

例子

• 参考代码：code
• 实现功能：

列表过渡

使用思路

• html

<div id="root">
	<transition-group mode="out-in">
	  <div v-for="item in items" :key="item.id">
	  	<div>{{item.name}}</div>	
	  </div>
	</transition-group>
	<button @click="add">Add</button>
</div>

总结

1. 使用transition-group
2. 其实transition-group的原理就是：
<transition>
	<div>Hello list transition</div>
</transition>
<transition>
	<div>Hello list transition</div>
</transition>
<transition>
	<div>Hello list transition</div>
</transition>

• js

var vm = new Vue({
	el: '#root',
	data: {
		items: []
	},
	methods: {
		add: function(){
			this.items.push({
				id: count++,
				name: 'Hello list transition'
			});
		}
	}
})

• css

.v-enter{
	opacity: 0;
}

.v-enter-active{
	transition: opacity 2s
}