Vue.js の transition-group が効かない。

注意点 1. key には繰り返す対象から直接持ってくる。

<!-- OK: key には繰り返す対象から直接持ってくる。 -->
<transition-group>
  <template v-for="element of array">
    <div :key="element.property"> {{ element.value }} </div>
  </template>
</transition-group>

<!-- NG: key には v-for の index を使わない -->
<transition-group>
  <template v-for="(element, index) of array">
    <div :key="index">{{ element.value }}</div>
  </template>
</transition-group>

• Vue transition-group not working - Stackoverflow

注意点 2. 移動中に移動している要素のプロパティを変更しない。

値をいれると瞬間移動します。

// OK
function onClick () {
  // NG: 移動する前に変更するというのはダメでした。
  // this.array.map(element => 2* element.value)

  this.array = _.shuffle(array)

  // setTimeout で逃します。
  setTimeout(() => {
    this.array.map(element => 2* element.value)
  }, 2000)
}

// NG: 瞬間移動します。
function onClick () {
  this.array = _.shuffle(array)
  this.array.map(element => 2* element.value)
}