title: VueJS 2 List Animation Not working as expected with transition name
body: <p>I've trying to build a list animation similar to in <a href="https://stripe.com/radar" rel="nofollow noreferrer">https://stripe.com/radar</a> (Review flagged payments). Cards scrolling vertically, one by one. Each card is from an array.</p>
  
  <p>I've implemented it and its working fine. However, the animation is not smooth. Looks like the animation name="animate" in transition-group is not working.</p>
  
  <p>Tried everything as in the documentation. Couldn't find a solution</p>
  
  <p><a href="https://jsfiddle.net/0aLfzs9u/" rel="nofollow noreferrer">https://jsfiddle.net/0aLfzs9u/</a></p>
  
  <pre><code>&lt;div class="container" id="vue-instance"&gt;
   &lt;transition-group name="animate"&gt;
      &lt;div class="row align-items-center quote" :class="{active: key==1 }" @click="items.pop()" v-for="(item,key) in items" :key="item"&gt;
        &lt;div class="col-4 mt-3 mb-3"&gt;
          &lt;p&gt;{{item}} Cement&lt;/p&gt;
          &lt;small&gt;75 bags&lt;/small&gt;
        &lt;/div&gt;
        &lt;div class="col-7"&gt;
          &lt;p&gt;Thrissur&lt;/p&gt;
          &lt;small&gt;12 hours ago&lt;/small&gt;
        &lt;/div&gt;
        &lt;div class="col-1"&gt;
          &lt;i class="fa fa-check"&gt;&lt;/i&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/transition-group&gt;
    &lt;p&gt;
    some footer content
    &lt;/p&gt;
   &lt;/div&gt;
  
  
      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;
  }
  </code></pre>