Анимация повторяющихся элементов списка, добавленных с помощью v-for

Question

Я хочу анимировать элементы списка в цикле с группой перехода vue. Я хочу, чтобы добавленный элемент всегда был анимированным. Но я всегда анимировал последнюю. Исследования в документации / вопросах показали, что это обычно проблема с вводом ключей: для ключа нужен уникальный идентификатор. Теперь я не могу взять идентификаторы из массива, который я там выводю, так как я выводю случайным образом, поэтому ключи будут дублироваться (на самом деле я получаю консольную ошибку дублированных элементов).

Поэтому я основал это предложение, чтобы получить уникальный идентификатор.

сценарий:

data: function() {
       return {
       logId: 1,
       },

methods: {
randomize () {
        if (this.activeAudio) {
          this.pause();
          this.activeAudio = null;
        }
        var chosenNumber = Math.floor(Math.random() * this.audios.length);
        this.activeAudio = this.audios[chosenNumber];
        this.activeAudio.isPlaying = true;
        this.activeAudio.file.play();
        this.activeAudio.file.loop = true;
        this.audioLogItems.unshift({
            text: this.activeAudio.name
        });

        this.logId++;
        this.audioLogItems.push({id: this.logId});
       },
} 

шаблон:

<transition-group name="baseLogList" tag="ul">
                    <li v-for="(audioLogItem, id) in audioLogItems" 
                    :key="id"
                    @click="this.audioLogItem.file.play()">
                      {{ audioLogItem.text }}
                    </li> 
                  </transition-group>

CSS:

.baseLogList {
  display:block
}
.baseLogList-enter-active, .baseLogList-leave-active {
  transition: all .5s;
}
.baseLogList-enter, .baseLogList-leave-to /* .fade-in-leave-active below version 2.1.8 */ {
  opacity: 0;
}

Вывод {{ audioLogItem.id }} вместо {{ audioLogItem.text }} фактически дает мне 2, 3, 4 и т. Д. На каждый щелчок. Но не похоже, что его можно использовать в цикле, так как всегда анимируются последние дочерние элементы, а не первые.

Мой вопрос: как мне сделать так, чтобы добавленный элемент всегда был анимированным, так что он был первым в списке?

Answer 1

Вы продвигаетесь в конце audioLogItems массив.

Если вы хотите увидеть анимацию первого элемента, вам нужно вставить его в начало массива.

Попробуйте использовать unshift.

this.audioLogItems.unshift({id: this.logId});