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

Question

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

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

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

在我的 <example-component> 模板中，我在另一个组件中使用了 v-for 循环。如下图：

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

这似乎工作正常。

<my-other-component> 第一次出现在屏幕上时会有动画。

在我的example-component 的methods 部分中，有一种方法有时会清空options 数组并用不同的对象重新填充它。如果这个方法现在运行，前两个选项将没有有这个动画，但是第三个、第四个、第五个等等会有。

因此，该动画似乎会在首次在 options 数组中创建特定索引时触发。

有谁知道这是为什么以及如何解决这个问题？

PS：我的（相关）CSS：

.option {
    animation-timing-function: linear;
    animation-name: option;
    animation-duration: 2.5s;
}

@-webkit-keyframes option{
    0% { opacity: 0; }
    75% { opacity: 0; }
    100% { opacity: 1; }
}

-

编辑 1：

添加animation-iteration-count: infinite 并不能解决问题。它只是重复动画。 （->“选项”每 2.5 秒消失并重新出现一次）

编辑 2：

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

另外，我尝试了不同的方法来清空我的数组，IE：

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

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

Answer 1

https://vuejs.org/v2/guide/list.html#Components-and-v-for

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

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

要给 Vue 一个提示以便它可以跟踪每个节点的身份，从而重用和重新排序现有元素，您需要为每个项目提供唯一的 key 属性。 key 的理想值是每个项目的唯一 ID。

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

Answer 2

如果您的动画与某个类相关联，切换该类是否应该重新触发动画？

Answer 3

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

animation-iteration-count:infinite;

如果您需要更多详细信息，这里是参考：https://developer.mozilla.org/en/docs/Web/CSS/animation-iteration-count