Animation vue.js错误的过渡组动画位置

起初我是css初学者 我试图为一些项目制作vue.js动画，效果很好，但我的动画制作错误

-我们有一个随机添加元素到数组的按钮

-我们可以单击元素来删除它

问题:

-动画始终在最后一项上运行

我希望vue js应该在添加或删除的项目上应用动画

使动画出错的代码中有什么错误

我应该更改或添加什么才能使动画正常工作

newvue({
el:“应用程序”，
数据：{
MyNumber:[1,2,3,4]，
最高数字我的数字：4
},
方法：{
addNumber（）{
这个.highestNumberInMyNumbers++；
this.myNumbers.splice（Math.floor（Math.random（）*this.myNumbers.length）、0、this.highestNumberInMyNumbers）；
},
移除编号（元素）{
此.myNumbers.splice（元素，1）
}
}
})

。混合输入{
不透明度：0；
}
.混合输入激活{
过渡：不透明度500ms；
动画：600毫秒混音，轻松向前；
}
.mix离开{}
.混合保持活动状态{
过渡：不透明度1000ms；
动画：向前混合0.4s轻松度；
不透明度：0；
}
@混合关键帧{
从{
转换：translateX（-20px）translateY（20px）；
}
到{
转换：translateX（0px）translateY（0px）；
}
}
@关键帧混合{
从{
转换：translateX（0px）translateY（0px）；
}
到{
转换：translateX（-20px）translateY（-20px）；
}
}

指令v-for的组转换

加号





{number}


转换组中有一个错误

当您将
li
的
键
绑定为
索引
时，每次删除
li
时，动画总是发生在最后一个
li
元素。

<transition-group name="mix"
                  mode="out-in">
    <li class="alert alert-success list-unstyled"
        style="height: 40px; padding: 10px 15px;margin-bottom: 8px;cursor: pointer;"
        v-for="(number,index) in myNumbers"
        @click="removeNumber(index)"
        :key="index">
        {{number}}
    </li>
</transition-group>

因此，如果要将动画与
li
一起使用，您可以将
键与
编号绑定在一起。

<transition-group name="mix"
                  mode="out-in">
    <li class="alert alert-success list-unstyled"
        style="height: 40px; padding: 10px 15px;margin-bottom: 8px;cursor: pointer;"
        v-for="(number,index) in myNumbers"
        @click="removeNumber(index)"
        :key="index">
        {{number}}
    </li>
</transition-group>



{{number}}


vs



{{number}}


最后，如果将动画与
转换组一起使用，则不要将
键
绑定到
索引
，而不是
项
或
编号
（在您的情况下）。

<transition-group name="mix"
                  mode="out-in">
    <li class="alert alert-success list-unstyled"
        style="height: 40px; padding: 10px 15px;margin-bottom: 8px;cursor: pointer;"
        v-for="(number,index) in myNumbers"
        @click="removeNumber(index)"
        :key="index">
        {{number}}
    </li>
</transition-group>

无论如何，确保
键
具有唯一值。
解决方案
<transition-group name="mix"
                  mode="out-in">
    <li class="alert alert-success list-unstyled"
        style="height: 40px; padding: 10px 15px;margin-bottom: 8px;cursor: pointer;"
        v-for="(number,index) in myNumbers"
        @click="removeNumber(index)"
        :key="index">
        {{number}}
    </li>
</transition-group>

使用转换或转换组时，不要在v-bind:key中的任何位置使用索引

解释
vuejs.org上的cookbook中有一个bug/缺少文档，以及一些不好的文档，但是注释[1]中对索引如何工作有详细的解释，但没有认识到这对于处于当前状态的开发人员来说是一个问题

我在github上发布过几次，但那里的Vue.js开发人员似乎充其量只是不屑一顾，拒绝记录这种行为，也拒绝承认这是一个问题

错误/错误的再现
下面的代码笔中有三个示例。#1起作用，#2使用：key=“index”（上面的具体错误），而#3使用：key=“item+”index

#2和#3给出您遇到的错误


代码笔摘要：

这一个工作：（使用项作为：键）



{{item}}


这个失败：（使用索引作为：键）



{{item}}


这个失败得更糟：（将索引与：key中的字符串连接起来）



{{item}}


错误报告（已拒绝）
我在这里向Vue.js开发人员提交了此错误报告：

“如果使用索引作为键，则转换组仅为最后一个元素设置动画”


它立即关闭了，因此根据他们的输入（请求我做一个PR以征求意见，但这不在我的驾驶室中），我跟进了这个特性请求，要求开发人员生成一个错误，这将从根本上解决问题

功能请求（跟进，也被拒绝）
“使用索引in:键值和v-for和转换时开发人员生成控制台错误”


在这个问题上设置开发错误似乎是合理的，但vue.js开发人员似乎认为我们应该能够自己解决这个问题。我希望他们能回过头来，把这看作一个真正的问题。我花了好几个小时的测试和报告时间才弄清楚

我希望这能帮助其他开发者在这个问题上浪费时间

参考资料

[1] 
我的解决方案：
为数组创建一个随机生成的字符串，然后将此随机生成的字符串用作键

模板

<div v-for="(row, index) in rows" :key="row.randomKey">
   ...
</div>

巨克隆

好的研究

对于像我一样来这里寻找的人：

动画很可能发生在关键点更改时，即删除和创建关键点时