Javascript CSS动画仅在首次创建时触发

这是我第一个使用Vuejs的项目

我有我的主要部件。在我的主要组件中，我有一个数据变量，它是一个数组。例如：

export default {
    name: 'example-component',
    data() {
        return {
            options: [
                {
                    text: {
                        nl: 'Jan',
                        en: 'John',
                    },
                    action: 'x1',
                },{
                    text: {
                        nl: 'Jansen',
                        en: 'Doe',
                    },
                    action: 'x2',
                },
            ],
        }
    },
}

在这个

的模板中，我在另一个组件内部使用了一个v-for循环。如下图所示：

<my-other-component v-for="option in options" v-on:click.native="select(option.action)"
    :key="option.id"></my-other-component>

-

编辑1:

添加

动画迭代计数：无限

无法解决此问题。它只是重复动画。（->“选项”每2.5秒消失并重新出现一次）

编辑2:

我已经试着在周围摆弄了一会儿。这似乎与时间有关。如果在删除op选项和再次添加它们之间有足够的时间，动画似乎可以正常工作

此外，我还尝试了不同的清空阵列的方法，即：

this.options = [];
this.options.length = 0;
this.options.splice(0, this.options.length);
// And all the other goodness

---

但它们似乎都不会影响此问题。

尝试在CSS规则中添加此CSS属性：

animation-iteration-count:infinite;

---

如果您需要更多详细信息，请参阅以下参考资料：

如果您的动画绑定到一个类，是否应切换该类以重新启动动画？

在2.2.0+中，当对组件使用v-for时，现在需要一个键

当Vue更新使用v-for渲染的元素列表时，默认情况下，它使用“就地修补”策略。如果数据项的顺序已更改，Vue将不移动DOM元素以匹配项的顺序，而只是将每个元素修补到位，并确保它反映在该特定索引处应呈现的内容

要给Vue一个提示，使其能够跟踪每个节点的标识，从而重用和重新排序现有元素，您需要为每个项提供唯一的键属性。键的理想值是每个项目的唯一id

---

基本上，如果不给循环中的每个数据对象一个唯一的ID并将其绑定到正在循环的元素，Vue将在数据更改时简单地“修补”数据，而不会触及DOM

我试过了。但是，正如我所料，这重复了我的动画。所以每两秒半，我的“选择”就会消失，然后再次出现。有趣的想法。但是，如果我清空数组（=删除所有

实例）并再次填充数组，它不应该与类切换分离吗？另外，如果我添加了第三个项目，之后它会被设置为动画。如果没有演示，可能我没有正确理解问题。在提供的代码段中，您的选项没有

id

，并且

：key

属性无法按预期工作。您必须在每个

：键中提供不同的值，此操作有效。但按照这个理论，这似乎很奇怪。我想我的“逻辑”思维并不像我想的那么逻辑。谢谢哇！我没有想到这一点。它为我解决了这个问题
animation-iteration-count:infinite;