掲題の件をぐぐると表示するデータが決まっている一覧のアニメーションは出てくるのに
表示するデータが変わるアニメーションの例が出てこないのでメモ。
それなりにきれいに動く。
実際はchangeDataメソッドみたいなテストメソッドじゃなくて、DBデータをフェッチしてitemsに入れるように実装する。
参考：https://jp.vuejs.org/v2/guide/transitions.html#リストトランジション
可変一覧データ表示アニメーション例
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>
- 使い方
<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タグ内で使用できるタグの制限に先に引っかかってる様子。
<tbody name="list-complete" is="transition-group">
・・・
</tbody>
See the Pen GRggvoV by J-Yamada (@J-Yamada) on CodePen.
やっぱり曲者はIE11だった
2019/12/17追記。
どうもIE11だと「display: table-row;」 が指定されているHTML要素には「transform: translateX(xx)」 など位置を変更するアニメーションCSSがうまく適用されないらしい。
MSDNなどには明確に記載はないようなのだが、実際に動かすと動かなかった。
「display: table-row;」 の要素をIE11で動かす試行錯誤はしてみたものの、うんともすんとも言わなかったので諦めて、それ以外の要素を動かすようにして解決。
IE11でtrタグをtranslateXやYをしたい場合、その配下のtdタグにもアニメーションCSSを適用する。