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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js