title: vue.js wrong transition group animation position
body: <p>at first I'm css beginner
  I was trying to make vue.js animation for some items and it worked well but I got wrong animation</p>
  
  <p>-We have button to add element to the array randomly</p>
  
  <p>-We can click at element to remove it</p>
  
  <p>problem:</p>
  
  <p>-The animation always run on the last item </p>
  
  <p>I expected that vue js should apply animation on the item which added or removed </p>
  
  <p>What is the wrong in code that make the animation go wrong ??</p>
  
  <p>What should i change or add to make the animation work correctly ??</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
    el: "#app",
    data: {
      myNumbers: [1, 2, 3, 4],
      highestNumberInMyNumbers: 4
    },
    methods: {
      addNumber() {
        this.highestNumberInMyNumbers++;
        this.myNumbers.splice(Math.floor(Math.random() * this.myNumbers.length), 0, this.highestNumberInMyNumbers);
      },
      removeNumber(element) {
        this.myNumbers.splice(element, 1)
      }
    }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.mix-enter {
    opacity: 0;
  }
  
  .mix-enter-active {
    transition: opacity 500ms;
    animation: mixing-in 600ms ease-in forwards;
  }
  
  .mix-leave {}
  
  .mix-leave-active {
    transition: opacity 1000ms;
    animation: mixing-out 0.4s ease-in forwards;
    opacity: 0;
  }
  
  @keyframes mixing-in {
    from {
      transform: translateX(-20px) translateY(20px);
    }
    to {
      transform: translateX(0px) translateY(0px);
    }
  }
  
  @keyframes mixing-out {
    from {
      transform: translateX(0px) translateY(0px);
    }
    to {
      transform: translateX(-20px) translateY(-20px);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://vuejs.org/js/vue.min.js"&gt;&lt;/script&gt;
   &lt;script src="https://code.jquery.com/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  
  
  
  
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;div id="app"&gt;
    &lt;h2&gt;group transition for directive v-for &lt;/h2&gt;
    &lt;hr&gt;
    &lt;button @click="addNumber"&gt;Add number&lt;/button&gt;
    &lt;br&gt;
    &lt;br&gt;
    &lt;div class="row"&gt;
      &lt;ul class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xs-offset-4"&gt;
        &lt;transition-group name="mix" mode="out-in"&gt;
  
          &lt;li class="alert alert-success list-unstyled" style="height: 40px; padding: 10px 15px;margin-bottom: 8px;cursor: pointer;" v-for="(number,index) in myNumbers" @click="removeNumber(index)" :key="index"&gt;{{number}}
          &lt;/li&gt;
        &lt;/transition-group&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>