Vue.jsのトランジションアニメーション[リスト編]

アニメーションしないリストの追加・削除・ソート

最初にアニメーションを使わない簡単なリストの追加・削除・ソート機能をざっくり作成してみます。

<div id="app">
	<button v-on:click="addItem">追加</button>
	<button v-on:click="removeItem">削除</button>
	<button v-on:click="order = order * -1">並び替え</button>
	<ul>
		<li v-for="item in sortedItems" v-bind:key="item.id">{{ item.name }}</li>
	</ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
new Vue({
	el: '#app',
	data: {
	count: 4,
	order: 1,
	items: [
		{ id: 1, name: 'item 1' },
		{ id: 2, name: 'item 2' },
		{ id: 3, name: 'item 3' },
		{ id: 4, name: 'item 4' }
	]
	},
	methods: {
		addItem: function() {
			this.count += 1;
			this.items.push({
				id: this.count,
				name: 'item ' + this.count
			});
		},
		removeItem: function() {
			this.count -= 1;
			this.items.splice(this.count, 1);
		},
	},
	computed: {
		sortedItems: function() {
			order = this.order;
			return this.items.sort(function(a, b){
				a = a.id;
				b = b.id;
				return (a === b ? 0 : a > b ? 1 : -1) * order;
			});
		}
	}
});
</script>

機能的な部分はアニメーションを意識する必要はありませんね。

スライドして追加・削除されるアニメーション

単一要素の場合はtransitionタグで囲みましたが、複数の場合はtransition-groupタグを使います。
ulをtransition-groupに置き換えて、tag属性にulを指定することで、ulに置きかわります。

<transition-group name="items" tag="ul">
	<li v-for="item in sortedItems" v-bind:key="item.id">{{ item.name }}</li>
</transition-group>

最後にCSSです。
enterとleaveは変わりませんが、transition-groupの場合、並び替えを行なった際に-moveクラスが追加されますので新たに設定します。

.items-leave-active,
.items-enter-active {
	transition: opacity .5s, transform .5s ease;
}
.items-leave-to,
.items-enter {
	opacity: 0;
	transform: translateX(50px);
}
.items-leave,
.items-enter-to {
	opacity: 1;
}
.items-move {
	transition: transform .5s;
}