0

我想用 vue 的转换组在循环中为列表项设置动画。我希望始终为添加的项目设置动画。但我总是让最后一个动画。对文档/问题的研究表明这通常是一个关键问题：密钥需要唯一的 id。现在我不能从我在那里输出的数组中获取 ID，因为我正在随机输出，所以键是重复的（实际上我得到了一个重复的元素控制台错误）。

所以我基于这个建议来获得一个唯一的 id。

脚本：

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 等等。但它似乎不能在循环中使用，因为仍然总是最后一个孩子被动画，而不是第一个。

我的问题：我怎样才能设法总是让添加的项目成为动画，所以列表中的第一个？

4

1 回答 1

0

您正在推动audioLogItems阵列的末端。

如果你想看到第一个元素被动画化，你需要把它推到数组的头部。

尝试使用unshift。

this.audioLogItems.unshift({id: this.logId});
于 2020-04-11T12:46:03.570 回答