要素を増やしたとき追加分しかアニメーションしない

こまっていること

次のようなコンポーネントで、transition-group内で配列をうけとって1件づつスライドインしてくるようなアニメーションを表示させたい。
中のコンテンツはvuetifyのv-cardを想定している。

v-forで渡した配列が、前に表示していたものより増えたとき、増分だけはアニメーションするが、既存で表示しているものは値は書き換わるがアニメーションしない。

<template lang="pug">
    v-container
        v-btn(@click="toggle").animated.rubberBand {{btnFace}}
        transition-group(
            name="custom"
            tag="div"
            enter-active-class="animated slideInRight"
            leave-active-class="animated fadeOut"
        )
            .card-area.offset-2.col-8(v-for="(item,index) in list" :key="index")
                v-card
                    span This is → {{index}} : {{item}}
</template>

<script>
    import 'animate.css/animate.css'

    export default {
        name: "Lists.vue",
        props: [
            'list'
        ],
        data(){
            return {
                btnFace: 'とぐる',
                flip: false
            }
        },
        methods: {
            toggle() {
                if (this.flip) {
                    this.list = [1,1,4,5,1,4]
                } else {
                    this.list = [0,1,0]
                }
                this.flip = !this.flip
            }
        }
    }
</script>

<style scoped>
</style>

実際の動作

image

  • 増分だけ動く (図ではOKと書いたが、実際にはまとまってうごいてくる)

期待している動作

image

  • 1件ずつトランジションが発火する

期待している動作のためには、どのように修正を加えればいいでしょうか?

vuetify, v-card を使わず、余計なもの取り除いた plain な html でやっても同じ結果になりますか?

実際に動くサンプルを codesandbox などに作ってもらえると、状況を把握しやすくなります。

コメントありがとうございます。
↓みたいなかんじで作ってみました

codesandbox の sample 見ました。
一つ一つ slide して入ってくるのは、この code でできないのは当然なんじゃないですか?

transition を頻繁に使わないので知見は殆ど無いですが、
個々の element が時間差を持って slide してくるということは、
個々に delay 設定が必要だと思います。

近い例としては

Staggering List Transitions
https://vuejs.org/v2/guide/transitions.html#Staggering-List-Transitions

が参考になるのではないでしょうか。

また、HelloWorld compnent に分けて書かずに App.vue 1つだけで実装した方が問題を見つけやすくなると思います。

HelloWorld に一箇所、「これはどう処理されるのかなぁ?」と疑問になるところがあったので。

コメントありがとうございます。

ディレイに関しては 個々に animationDelay をいれることで問題なかったです。
増分だけ書き換わることに関しては、leave-activeを設定しているのが原因な気がしてきました。
enter-activeのみの設定にしたところ、おおよそ期待の動きになってきました。
残像がみえている部分についてはbeforeEnterなどのフックで消すかどうするかと今さぐってます