title: vuejs animation issue on removing item of list
body: <p>I am trying to remove a list item with some animation, issue is if the removed item is the last one it works fine, but if I remove some item other than the last one animation is not working properly, see the fiddle here: <a href="https://jsfiddle.net/49gptnad/1003/" rel="nofollow noreferrer">https://jsfiddle.net/49gptnad/1003/</a></p>
  
  <p>js code:</p>
  
  <pre><code>Vue.component('hello', {
      template: '&lt;transition name="bounce"&gt;&lt;li&gt;{{ind}} &lt;a @click="removeit(ind)"&gt;remove&lt;/a&gt;&lt;/li&gt;&lt;/transition&gt;',
    props: ['ind'],
    methods: {
      removeit(ind) {     
          this.$emit('removeit')
      }
    }
  })
  
  var vm = new Vue({
    el: '#vue-instance',  
    data: {
      list: [1,2,3,4,5,6,7,8,9,10]
    },
    methods: {
      removeit (extra, index) {
          this.list.splice(index, 1)
      }
    }
  });
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;div id="vue-instance"&gt;
    &lt;ul&gt;
      &lt;hello v-for="(item,index) in list" :ind="item" @removeit="removeit('extra', index)"&gt;&lt;/hello&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.bounce-enter-active {
    animation: bounce-in .7s;
  }
  .bounce-leave-active {
    animation: bounce-in .7s reverse;
  }
  @keyframes bounce-in {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(1.20);
    }
    100% {
      transform: scale(1);
    }
  }
  </code></pre>