Vue.js の Transition で、データの変更時にアニメーションを実行する方法

通常、下記のコードだと Vue router によって router-view 配下の Component が変更された時に実行される。

  <transition name="slide-fade">
    <router-view />
  </transition>

Component を使いまわしてデータのみ変更する場合にもアニメーションを実行したい時があったので調べてみました。

その方法

key を設定することで、Vue が異なる要素と認識してアニメーションが実行される。

  <transition name="slide-fade">
    <router-view :key="data.id" />
  </transition>