Vue js wrong transition animation

Question

I start css first I tried to create a vue js animation for some elements and it worked fine, but I got the wrong animation

-We have a button to add an item to the array randomly

-We can click on an item to remove it.

Problem:

- animation always starts in the last element

I expected vue js to apply animation to an element that added or removed

What is wrong in the code that makes the animation wrong?

What should I change or add in order for the animation to work correctly?

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)
    }
  }
})

.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);
  }
}

<script src="https://vuejs.org/js/vue.min.js"></script>
 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>





<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="app">
  <h2>group transition for directive v-for </h2>
  <hr>
  <button @click="addNumber">Add number</button>
  <br>
  <br>
  <div class="row">
    <ul class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xs-offset-4">
      <transition-group name="mix" mode="out-in">

        <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">{{number}}
        </li>
      </transition-group>
    </ul>
  </div>
</div>

Run code

Answer 1

There transition-groupis an error:

key li index, , li, li.

, li, key number .

<transition-group name="mix"
                  mode="out-in">
    <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">
        {{number}}
    </li>
</transition-group>

<transition-group name="mix"
                  mode="out-in">
    <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="number">
        {{number}}
    </li>
</transition-group>

, transition-group, key index item number ( ).

, , key .