首先我是CSS初学者我试图为某些项目制作vue.js动画，但效果很好，但我却弄错了动画
- 我们有按钮将元素随机添加到数组
- 我们可以单击元素删除
问题：
- 动画总是在最后一项上运行
我希望VUE JS应对添加或删除的项目应用动画
使动画出错的代码中有什么问题？
我应该更改或添加以使动画正常工作？
new Vue({
el: "#app",
data: {
myNumbers: [1, 2, 3, 4],
highestNumberInMyNumbers: 4
},
methods: {
addNumber() {
this.highestNumberInMyNumbers++;
this.myNumbers.splice(Math.floor(Math.random() * this.myNumbers.length), 0, this.highestNumberInMyNumbers);
},
removeNumber(element) {
this.myNumbers.splice(element, 1)
}
}
}).mix-enter {
opacity: 0;
}
.mix-enter-active {
transition: opacity 500ms;
animation: mixing-in 600ms ease-in forwards;
}
.mix-leave {}
.mix-leave-active {
transition: opacity 1000ms;
animation: mixing-out 0.4s ease-in forwards;
opacity: 0;
}
@keyframes mixing-in {
from {
transform: translateX(-20px) translateY(20px);
}
to {
transform: translateX(0px) translateY(0px);
}
}
@keyframes mixing-out {
from {
transform: translateX(0px) translateY(0px);
}
to {
transform: translateX(-20px) translateY(-20px);
}
}<script src="https://vuejs.org/js/vue.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="app">
<h2>group transition for directive v-for </h2>
<hr>
<button @click="addNumber">Add number</button>
<br>
<br>
<div class="row">
<ul class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xs-offset-4">
<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>
</ul>
</div>
</div>
transition-group！
当您将li的key绑定为index时，每次删除li时，动画总是在最后一个li元素上发生。
因此，如果要使用li使用动画，则可以在情况下使用key绑定CC_8。
<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>
vs
<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="number">
{{number}}
</li>
</transition-group>
最后，如果您将动画与transition-group一起使用，请勿将key绑定到index，而不是item或number(在您的情况下(。
无论如何，请确保key具有唯一值。
solution
不要使用 index v-bind中的任何地方：key 使用过渡或过渡组时。
说明
在vuejs.org上的食谱中有一个错误/丢失的文档，但是在评论[1]中有一个详细的解释[1]，但没有任何认识，但对开发人员来说，这是一个问题。这是当前状态。
我已经向GitHub发布了几次，但是那里的Vue.js开发人员似乎充其量不屑一顾，拒绝记录此行为或将其视为问题。
错误/错误的复制
下面的编码蛋白中有三个示例。＃1工作，＃2使用：key =" index"(您上面的特定错误(和＃3使用：key =" item '_' index"。
＃2和＃3给出您正在遇到的错误。
https://codepen.io/megacromulent/pen/wezwnl
codepen的摘要：
这个 works ：(使用项目为：键(
<transition-group name="fade" tag="ol">
<li v-for="(item, index) in items"
v-bind:key="item">
{{item}}
</li>
</transition-group>
这个失败 ：(使用索引为：键(
<transition-group name="fade" tag="ol">
<li v-for="(item, index) in items"
v-bind:key="index" >
{{item}}
</li>
</transition-group>
这个失败 ：(与字符串连接索引：键(
(<transition-group name="fade" tag="ol">
<li v-for="(item, index) in items"
v-bind:key="item + '_' + index" >
{{item}}
</li>
</transition-group>
错误报告(被拒绝(
我在此处向vue.js devs提交了此错误报告：
"当使用索引作为键"
(https://github.com/vuejs/vue/issues/8718
它立即关闭，因此基于他们的输入(请求我对PR进行评论，但这不在我的驾驶室中(，我跟进此功能请求，以确保Dev Build给出错误，这将解决该问题根源的问题。
功能请求(跟进，也被拒绝(
"使用索引in in：with v-for and Transitions的键值时，开发器构建控制台错误"
https://github.com/vuejs/vue/issues/8730
在此问题上提出DEV错误似乎是合理的，但是VUE.JS开发人员似乎认为我们应该能够自己弄清楚这一点。我希望他们来到周围，并将其视为一个真正的问题。我花费了数小时的测试和报告时间来弄清楚。
我希望这有助于其他开发人员浪费时间来解决这个问题。
参考
[1] https://github.com/vuejs/vue/issues/8718#issuecomment-416909724
我的解决方案：为您的数组创建一个随机生成的字符串，然后将此随机生成的字符串用作键。
模板
<div v-for="(row, index) in rows" :key="row.randomKey">
...
</div>
脚本
export default {
data() {
return {
rows: [],
}
},
methods: {
add() {
this.rows.push({
id: null,
name: '',
randomKey: this.generateRandomKey()
})
},
remove(index) {
this.currency_exchange.splice(index, 1)
},
generateRandomKey() {
let length = 10
return Math.round((Math.pow(36, length + 1) - Math.random() * Math.pow(36, length))).toString(36).slice(1);
}
}
}
巨头
良好的研究！
对于像我这样的人来这里寻找的人：
可能会在更改键时(即删除和创建元素时，如果键不更改时(发生动画，那么就不会有动画。当数组更改时，所有元素都会重建，这意味着键也会重写，如果它们在元素上更改，这将使元素消失并出现。
巨头，让我们看看：
在第二种情况下，带有索引的选项 - 我们删除数组的第一个元素，将新密钥放在组件中的所有剩余元素上 - 但是在开始时，它们将是相同的0,1,2。..即第一个列表的键不会更改，因此不会破坏元素，因此不会被动画。
在第三个版本中，所有元素的密钥每次都会更改，即所有元素都将被重新绘制，即删除和重建，动画将适用于所有元素
好吧，在第一个版本中。如果项目相同，它将与索引相同，因为键不会更改，这意味着，在所有情况下，只有最后一个将是动画的，即在将项目添加和删除到列表的结尾。