起初我是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>per*_*507 24
有一个错误transition-group!
当你将key of 绑定 li为index,每次删除a时li,动画总是发生在最后一个li元素上.
因此,如果您想使用动画li,可以在您的情况下绑定keywith 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>
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,不要绑定keyto index,而不是item或number(在你的情况下).
无论如何,请确保key具有独特的价值.
小智 5
使用transition或transition-group时，请勿在v-bind：key中的任何位置使用索引。
vuejs.org上的食谱中存在错误/丢失文档以及错误文档，但是注释[1]中有关于索引如何工作的详细说明，但没有意识到这对于开发人员而言是一个问题。
我已经在github上发布了几次，但是那里的Vue.js开发人员充其量似乎并不屑一顾，并且拒绝记录这种行为或将其识别为问题。
下面的代码笔中有三个示例。＃1有效，＃2使用：key =“ index”（上面的特定错误），＃3使用：key =“ item +'_'+ index”。
＃2和＃3给出您遇到的错误。
https://codepen.io/megacromulent/pen/wEzWNL
Codepen摘要：
这一项工作：（使用项作为：key）
<transition-group name="fade" tag="ol">
<li v-for="(item, index) in items"
v-bind:key="item">
{{item}}
</li>
</transition-group>
这失败了：（将索引用作：key）
<transition-group name="fade" tag="ol">
<li v-for="(item, index) in items"
v-bind:key="index" >
{{item}}
</li>
</transition-group>
这失败了：（将索引与字符串在：key中连接）
<transition-group name="fade" tag="ol">
<li v-for="(item, index) in items"
v-bind:key="item + '_' + index" >
{{item}}
</li>
</transition-group>
我在此将错误报告提交给Vue.js开发人员：
“如果使用索引作为键，则过渡组仅对最后一个元素进行动画处理”
https://github.com/vuejs/vue/issues/8718
它立即关闭，因此根据他们的输入（要求我进行PR进行评论，但这不在我的舵手库中），我随后跟进了此功能请求，以使开发版本产生错误，从而可以解决问题。根。
“在带有v-for和transitions的：key值中使用索引时，Dev构建控制台错误”
https://github.com/vuejs/vue/issues/8730
在这个问题上放一个开发错误似乎是合理的，但是vue.js开发人员似乎认为我们应该能够自己解决这个问题。我希望他们过来看看，这是一个真正的问题。这花费了我数小时的测试和报告时间才能弄清楚。
我希望这有助于其他开发者在此问题上浪费时间。
参考文献
[1] https://github.com/vuejs/vue/issues/8718#issuecomment-416909724