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

See the Pen Vue.js Simple List Transition by webopixel (@webopixel) on CodePen.