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>有第一次出现在屏幕上的动画。

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

因此看起来好像这个动画会在options数组中首次创建特定索引时触发。

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

PS：我的（相关）CSS：

options

-

编辑1：

添加.option { animation-timing-function: linear; animation-name: option; animation-duration: 2.5s; } @-webkit-keyframes option{ 0% { opacity: 0; } 75% { opacity: 0; } 100% { opacity: 1; } }并不能解决问题。它只是重复动画。（ - ＆gt;'选项'消失并每2.5秒重新出现一次）

编辑2：

我试图摆弄一下。似乎必须对时机做点什么。如果在删除操作选项之间足够的时间并再次添加它们，动画似乎工作正常。

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

animation-iteration-count: infinite

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

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的理想值是每个项目的唯一ID。

基本上，如果你没有给你的循环中的每个数据对象一个唯一的ID并将它绑定到循环的元素，Vue将简单地＆＃34; patch＆＃34;数据发生变化并且无法触及DOM。

Answer 2

如果您的动画与某个类绑定，那么切换该类是否应重新启动动画？

Answer 3

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

animation-iteration-count:infinite;

如果您需要更多详细信息，请参考以下内容：https://developer.mozilla.org/en/docs/Web/CSS/animation-iteration-count

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

3 个答案: