css - VueJS 2 列表动画未按预期使用转换名称工作

Question

我正在尝试构建类似于 https://stripe.com/radar 中的列表动画(审查标记的付款)。卡片一张一张垂直滚动。每张卡片都来自一个数组。

我已经实现了它并且工作正常。然而，动画并不流畅。看起来 transition-group 中的动画 name="animate"不起作用。

尝试了文档中的所有内容。找不到解决方案

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

自己解决了: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
}