Vue/Nuxtのv-forを使ったリストで削除するときに、
リスト要素が横にずれながら消えるアニメーションをしたいときの備忘録

ほぼ、Vueの公式ガイドに書いてあった。。

おぉリストのアニメーションもできた(*´ω｀*)
削除時にふわっと横に消えていくヽ(=´▽`=)ﾉ
公式ガイドのまま。。公式ガイドすごい。。 pic.twitter.com/nGzLeEjw2E
— きらぷか@i18n補助ツール『トランスノート』開発者 (@kira_puka) June 9, 2019

こんな感じで使うっぽい

ポイントは以下の4つ

transition-groupをつかう
リスト要素のkeyにindexは使わない
リスト要素にtransition: all 1s;を指定
要素が消えるときはposition: absolute;

特に「リスト要素のkeyにindexは使わない」に気づかずはまった。。

<template>
  <div class="container">
    <!-- v-forをtransition-groupで囲む -->
    <!-- tagを指定すると指定したタグでリスト要素を囲む-->
    <transition-group name="list" tag="div">
      <template v-for="(item, index) in items">
        <!-- ※keyをindexにするとうまくいかない。。 -->
        <div class="list-item" :key="item.id">{{ item.value }}</div>
      </template>
    </transition-group>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "nuxt-property-decorator";

@Component
export default class ListAnim extends Vue {
  items = [
    { id: 1, value: "Item1" },
    { id: 2, value: "Item2" },
    { id: 3, value: "Item3" },
  ]
}
</script>

<style lang="scss" scoped>
// ****************************
// * TRANSION: LIST
// ****************************
.list-item {
  // 消えたあとに残った要素が移動するときも、
  // アニメーションしてほしいので全体にtransitionを設定
  transition: all 1s;
}

.list-enter,
.list-leave-to {
  opacity: 0;
  transform: translateX(50px);
}
.list-leave-active {
  // 消えるときに位置がずれないように、
  // positionをabsoluteにしておく
  position: absolute;
}
</style>