Vue.jsでDBデータ一覧表示(table)アニメーション IE11対応

掲題の件をぐぐると表示するデータが決まっている一覧のアニメーションは出てくるのに
表示するデータが変わるアニメーションの例が出てこないのでメモ。

それなりにきれいに動く。
実際はchangeDataメソッドみたいなテストメソッドじゃなくて、DBデータをフェッチしてitemsに入れるように実装する。

参考：https://jp.vuejs.org/v2/guide/transitions.html#リストトランジション

# 可変一覧データ表示アニメーション例

```vuejs:ListAnimation.vue
<template>
    <transition-group :tag="tag" name="list-complete">
        <slot></slot>
    </transition-group>
</template>

<script>
export default {
    props:{
        tag: {
            type: String,
            default: 'ul',
        }
    }
}
</script>

<style lang="scss" scoped>
::v-deep {
// 直下のループItemだけアニメーション
    & > *,
    & > tr > td {                    // IE11用の指定。2019/12/17追記
        transition: all 0.5s;
    }
// 新しいデータをスライドイン
    .list-complete-enter,
    tr.list-complete-enter > td {    // IE11用の指定。2019/12/17追記
        opacity: 0;
        transform: translateX(-30px);
    }
// 既存データは見えなくするだけ。
// absolute指定必須。
// absolute指定しないと既存データがその場所に残る。
    .list-complete-leave-active {
        opacity: 0;
        position: absolute;
        transition: none;
    }
}
</style>
```

* 使い方

```vuejs
<template>
    <div>
        <button type="button" class="btn btn-primary" @click="changeData()"></button>
        <table class="table table-sm table-valign-middle">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>名前</th>
                    <th>メールアドレス</th>
                </tr>
            </thead>
            <list-animation tag="tbody">
                <tr v-for="item in items" :key="item.id">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.email }}</td>
                </tr>
            </list-animation>
        </table>
    </div>
</template>
<script>
import ListAnimation from '@/components/animations/ListAnimation.vue';
export default {
    data() {
        return {
            items: [],
            isChange: false,
        };
    },
    components: {
        ListAnimation,
    },
    methods: {
        changeData() {
            this.items = this.isChange ? [
                {id:1, name: 'test1', email: 'test1@test.com'},
                {id:2, name: 'test2', email: 'test2@test.com'},
                {id:3, name: 'test3', email: 'test3@test.com'},
                {id:4, name: 'test4', email: 'test4@test.com'},
            ] : [
                {id:5, name: 'test5', email: 'test5@test.com'},
                {id:6, name: 'test6', email: 'test6@test.com'},
                {id:7, name: 'test7', email: 'test7@test.com'},
                {id:8, name: 'test8', email: 'test8@test.com'},
            ];

            this.isChange = !this.isChange;
        },
    },
}
</script>
```
# デモ
JSFiddleとかで試すなら、trantision-groupの部分を以下のように変えないと動かない。
tableタグ内で使用できるタグの制限に先に引っかかってる様子。

```html
<tbody name="list-complete" is="transition-group">
・・・
</tbody>
```

<p class="codepen" data-height="400" data-theme-id="default" data-default-tab="html,result" data-user="J-Yamada" data-slug-hash="GRggvoV" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="GRggvoV">
  <span>See the Pen <a href="https://codepen.io/J-Yamada/pen/GRggvoV">
  GRggvoV</a> by J-Yamada (<a href="https://codepen.io/J-Yamada">@J-Yamada</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

#やっぱり曲者はIE11だった
2019/12/17追記。
どうもIE11だと**「display: table-row;」** が指定されているHTML要素には**「transform: translateX(xx)」** など位置を変更するアニメーションCSSがうまく適用されないらしい。

MSDNなどには明確に記載はないようなのだが、実際に動かすと動かなかった。
**「display: table-row;」** の要素をIE11で動かす試行錯誤はしてみたものの、うんともすんとも言わなかったので諦めて、それ以外の要素を動かすようにして解決。

**IE11でtrタグをtranslateXやYをしたい場合、その配下のtdタグにもアニメーションCSSを適用する。**