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
タグを使います。
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;
- }