Posted: 2018.06.20 / Category: javascript / Tag: Vue

前回は一つの要素に対してトランジションアニメーションをしましたが、今回はリストなど複数の要素に対してトランジションをしてみます。

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

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

<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;
}