VueJS 2 List Animation Funktioniert nicht wie erwartet mit dem Transitionsnamen

Question

Ich habe versucht, eine Listenanimation ähnlich wie in https://stripe.com/radar (Überprüfung gekennzeichnete Zahlungen) zu erstellen. Karten scrollen vertikal nacheinander. Jede Karte stammt aus einem Array.

Ich habe es implementiert und es funktioniert gut. Die Animation ist jedoch nicht glatt. Es sieht so aus, als ob der Animationsname = "animate" in der Übergangsgruppe nicht funktioniert.

Versucht alles wie in der Dokumentation. Es kann keine Lösung

https://jsfiddle.net/0aLfzs9u/

<div class="container" id="vue-instance"> 
<transition-group name="animate"> 
    <div class="row align-items-center quote" :class="{active: key==1 }" @click="items.pop()" v-for="(item,key) in items" :key="item"> 
     <div class="col-4 mt-3 mb-3"> 
     <p>{{item}} Cement</p> 
     <small>75 bags</small> 
     </div> 
     <div class="col-7"> 
     <p>Thrissur</p> 
     <small>12 hours ago</small> 
     </div> 
     <div class="col-1"> 
     <i class="fa fa-check"></i> 
     </div> 
    </div> 
    </transition-group> 
    <p> 
    some footer content 
    </p> 
</div> 


    var vm = new Vue({ 
    el: '#vue-instance', 
    data: { 
    items: [1,2,3] 
    }, 
    created() { 
    let self = this 
    setInterval(function() { 
     self.items.pop(); 
     self.items.splice(0, 0, Math.floor((Math.random()*100)+1)); 
    }, 2000); 
    } 
}); 



.animate-enter-active, 
.animate-leave-active{ 
    transition: all 2s; 
    max-height: 230px; 
    opacity:1; 
} 

.animate-enter, 
.animate-leave-to{ 
    transition: all 2s; 
    max-height: 0px; 
    overflow:hidden; 
} 

.quote { 
    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08); 
    border-radius: 4px; 
    background-color: white; 
    filter: blur(3px); 
    transform: scale(.95); 
    transition: all 1s; 
} 

.active { 
    filter: blur(0px); 
    transform: scale(1); 
    transition: all 1s; 
} 

Answer 1

Gelöst es selbst finden: https://jsfiddle.net/rfs12yh6/

<div id="list-complete-demo" class="demo"> 
    <button v-on:click="shuffle">Shuffle</button> 
    <transition-group name="list-complete" tag="p"> 
    <h3 
     v-for="(item,key) in items" 
     v-bind:key="item" 
     class="list-complete-item quote" 
     :class={active:key!=1} 
    > 
     {{ item }} 
    </h3> 
    </transition-group> 
    <p>Some footer</p> 
</div> 

new Vue({ 
    el: '#list-complete-demo', 
    data: { 
    items: [1,2,3], 
    nextNum: 10 
    }, 
    methods: { 
    shuffle: function() { 
     this.items.pop() 
     this.items.splice(0, 0, this.nextNum++) 
    } 
    } 
}) 

.list-complete-item { 
    transition: all 1s; 
    margin-right: 10px; 
} 
.list-complete-enter 
{ 
    opacity: 0; 
    transform: translateY(-20px); 
} 
.list-complete-leave-to 
{ 
    opacity: 0; 
    transform: translateY(20px); 
} 
.list-complete-leave-active { 
    position: absolute; 
} 
.quote{ 
    transition: all 1s ease; 
} 
.active{ 
    filter: blur(1px); 
    transition: all 1s ease 
}