Vue поочередная анимация списков

Question

Делаю поочередное появление элементов на Vue, что бы при добавлении любого количество, элементы появлялись и пропадали по порядку. Появление сделал, но при частом нажатии вторая партия элементов не дожидается первой и кажется что элементы добавляют не поочередно. А исчезновение вообще работает как попало. Что сделать чтоб это работало?)

Vue.createApp({
  data() {
    return {
      count: 5,
      delayIndex: 0,
    };
  },
  methods: {
    addCount: function () {
      this.count += 5;
      this.delayIndex = 0;
    },
    removeCount: function () {
      this.count -= 5;
      this.delayIndex = 0;
    },
    beforeEnter: function (el) {
      el.style.opacity = 0;
    },
    enter: function (el) {
      var delay = this.delayIndex * 150;
      this.delayIndex++;
      setTimeout(function () {
        el.style.opacity = 1;
      }, delay);
    },
    leave: function (el) {
      var delay = this.delayIndex * 150;
      this.delayIndex++;
      setTimeout(function () {
        el.style.opacity = 0;
      }, delay);
    },
  },
}).mount('#app')

ul {
  list-style-type: none;
  padding: 0;
  text-align: left;
}
li {
  display: inline-block;
  margin: 0 10px;
}

.coins-enter-active,
.coins-leave-active {
  transition: opacity 0.5s ease;
}

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <button @click="addCount">Добавить</button>
  <button @click="removeCount">Убавить</button>
  <transition-group
    name="coins"
    tag="ul"
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:leave="leave"
  >
    <li
      v-for="(item, index) in count"
      v-bind:key="item"
      v-bind:data-index="index"
    >
      {{ item }}
    </li>
  </transition-group>
</div>

БЛОГ НА HUSL

Vue поочередная анимация списков

Ответы (0 шт):