<div id="app">
<button v-on:click="addItem">追加</button>
<button v-on:click="removeItem">削除</button>
<button v-on:click="order = order * -1">並び替え</button>
<transition-group name="items" tag="ul">
<li v-for="item in sortedItems" v-bind:key="item.id">{{ item.name }}</li>
</transition-group>
</div>
#app {
overflow-x: hidden;
}
button {
font-size: 15px;
margin-bottom: 20px;
border: none;
color: #fff;
background: #48c2cd;
padding: 10px 20px;
cursor: pointer;
outline: none;
border-radius: 5px;
}
.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;
}
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;
});
}
}
});
This Pen doesn't use any external CSS resources.