Vueのアニメーションが凄い

Vueのアニメーション

VueはFLIPアニメーションがデフォルトでついているので、以下のようなアニメーションを簡単に実装できます。

See the Pen vue flip animation test by wintyo (@wintyo) on CodePen.

transition-group

v-enter, v-leaveだけの場合は単純なtransitionを使えばいいですが、上のようにFLIPアニメーションを付ける場合はtransition-groupでラップします。
transition-groupではtransitionでも使えたv-enter, v-leaveに加えて、v-moveもクラスに付与されます。v-moveは追加や削除などで要素が動く時に付与されます。要素の位置が重要なのでkeyの設定は必須です。
以下のコードは設定だけなので、後は$data.listに対して追加なり削除なりシャッフルなりをすると動くようになります。動くコードは上のCodePenの方を参照してください。（vueファイルとして書けなかったので書き方が若干違うのはご了承ください）

アニメーションの設定例

<template>
  <ul>
    <transition-group name="flip">
      <template v-for="item in $data.list">
        <li :key="item">{{ item }}</li>
      </template>
    </transition-group>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: [1, 2, 3, 4, 5]
    };
  }
};
</script>

<style lang="scss">
.flip {
  // 要素が移動するときのアニメーション設定（基本的にはtransitionにtransformを設定していればいい）
  &-move {
    transition: transform 0.5s;
  }
  
  // 要素が入るときのアニメーション
  &-enter {
    // アニメーションの初期設定（初期値とtransitionを設定する）
    &-active {
      opacity: 0;
      transform: translate3d(0, -30px, 0);
      transition: opacity 0.5s, transform 0.5s;
    }
    // アニメーション開始（目標のプロパティ値を設定する）
    &-to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  // 要素が消える時のアニメーション
  &-leave {
    // アニメーションの初期設定
    &-active {
      // 要素が消える場合はabsoluteにする（重要！）
      position: absolute;
      transition: opacity 0.5s, transform 0.5s;
    }
    // アニメーション開始
    &-to {
      opacity: 0;
      transform: translate3d(0, -30px, 0);
    }
  }
}
</style>

付与されるクラス名について

クラス名はtransition-groupのname属性で設定した名前を接頭辞にしたクラスが付与されます。今回で言えば、.flip-move, .flip-enter-active, .flip-enter-to, .flip-leave-active, .flip-leave-toがliタグに付与されます。

transitionの設定

要素が入る時と出る時でそれぞれクラスが2つ付与されるので、SCSSのような入れ子で書ける言語にすると設定しやすくなります。-activeと-toはタッチの差で-activeの方がクラスが付与される（はず）なので、-activeの方にCSS transitionの設定をします。クラスが付与される時間はここで指定したtransitionの時間なので、設定しない場合は何のクラスも設定されません（つまづきポイント）。
ちなみに今回はそれぞれに丁寧にtransitionを設定していましたが、付与対象のスタイルにtransition: all 0.5s;とか設定していたらこれらの設定は不要になります。

FLIPアニメーションするために設定するv-leaveのポイント

.flip-moveは要素が動く時に付与されるので、-leaveクラスが付与される削除要素にposition: absoluteをつけておきますと、要素を詰めることができるので後ろの要素がアニメーションで動くことができます。逆に言えばこれをつけていないと削除の時だけ詰めるアニメーションがおきません（つまづきポイント）。

まとめ

こんな感じでCSS Transitonだけで簡単にアニメーションすることができます。ただ簡単に設定できるようにするため色々ルールがあるので、最初はとっつきにくいかもしれません。そんな時はCodePenとかJSFiddleとかで軽くテストコードを書いてみるといいかもしれません。
僕も割とハマったので、注意ポイントを改めて載せます。

• transitionを設定していないとクラスは付与されない（クラスが付与されるかのテストでハマる）
• 要素が消えるv-leave側でposition: absolute;を設定していないと後ろの要素がFLIPアニメーションしてくれない

その他詳しい設定については 公式ガイド の方を参照してください。他にも色々設定することができます。