WEBOPIXEL

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

Posted: 2018.06.20 / Category: javascript / Tag: 

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

Sponsored Link

vue 2.5.16
を使用します。

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

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

<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タグを使います。
ultransition-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です。
enterleaveは変わりませんが、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;
}