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

Question

起初我是 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>

Answer 1

解决方案

不要使用 索引 中的任何地方v-绑定(bind):键使用转换或转换组时。

解释

vuejs.org 上的说明书中有一个错误/缺失的文档，以及错误的文档，但是评论 [1] 中有关于索引如何工作的详细解释，但没有认识到这对于当前状态的开发人员来说是一个问题.

我已经在 github 上发布了几次，但那里的 Vue.js 开发人员似乎充其量只是不屑一顾，拒绝记录这种行为或将其视为问题。

重现错误/错误

下面的代码笔中有三个示例。 #1 有效，#2 使用 :key="index"(您在上面的具体错误)，#3 使用 :key="item +'_'+ index"。

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

https://codepen.io/megacromulent/pen/wEzWNL

代码笔总结:

这个作品 : (使用项目作为: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 和转换中使用 :key 值中的索引时，开发人员构建控制台错误”

https://github.com/vuejs/vue/issues/8730

在这个问题上添加一个开发错误似乎是合理的，但 vue.js 开发人员似乎认为我们应该能够自己解决这个问题。我希望他们能过来并将其视为一个真正的问题。我花了几个小时的测试和报告时间来弄清楚。

我希望这可以帮助其他开发人员在这个问题上浪费时间。

引用文献

[1] https://github.com/vuejs/vue/issues/8718#issuecomment-416909724