javascript - 在 Vue 组件渲染上同时转换多个元素

Question

以下jsfiddle中显示的简单案例：

https://jsfiddle.net/hsak2rdu/

我想交换和动画两个元素，但失败了。正如您在 Playground 中单击切换按钮后看到的那样，第二个元素闪烁到最终位置。

我希望它们同时具有动画效果，就像相互交叉一样。是否可以？

模板：

<div id="app">
  <div class="dom" v-for="(_d, _i) in list" :key="_d.id" :style="{ top: _i * 50 + 'px'}">
    <span>{{_d.text}}{{_i}}</span>
  </div>
  <button @click="handle">Toggle</button>
  {{list}}
</div>

JS：

new Vue({
  el: '#app',
  data: {
    show: true,
    list: [
      {
        id:1,
        text:'First'
      },
      {
        id:2,
        text:'Second'
      }
    ]
  },
  methods:{
    handle: function (){
      console.log("DEBUG", this.list)
      let a = JSON.parse(JSON.stringify(this.list[0]));
      let b = JSON.parse(JSON.stringify(this.list[1]))
      this.$set(this.list, 0, b);
      this.$set(this.list, 1, a);
    }
  }
});

Answer 1

唯一必要的更改是将 包装v-for在 a 中<transition-group>：

<transition-group tag="div" name="list">
  <div class="dom" v-for="(_d, _i) in list" :key="_d.id" :style="{ top: _i * 20 + 'px' }">
    <span>{{_d.text}}{{_i}}</span>
  </div>
</transition-group>

从文档：

这可能看起来很神奇，但在幕后，Vue 使用了一种称为FLIP的动画技术，使用变换将元素从旧位置平滑过渡到新位置

这是一个演示：

new Vue({
  el: '#app',
  data: () => ({
    show: true,
    list: [
      {
        id:1,
        text:'First'
      },
      {
        id:2,
        text:'Second'
      }
    ]
  }),
  methods:{
    handle: function (){
      console.log("DEBUG", this.list)
      let a = JSON.parse(JSON.stringify(this.list[0]));
      let b = JSON.parse(JSON.stringify(this.list[1]))
      this.$set(this.list, 0, b);
      this.$set(this.list, 1, a);
    }
  }
});

.dom{
  position: absolute;
  transition: all 1s linear;
  opacity: 1;
}
button{
  margin-top: 50px;
}
#app{
  margin-top: 50px;
  position: relative;
}

<div id="app">
  <transition-group tag="div" name="list">
    <div class="dom" v-for="(_d, _i) in list" :key="_d.id" :style="{ top: _i * 20 + 'px' }">
      <span>{{_d.text}}{{_i}}</span>
    </div>
  </transition-group>
  <button @click="handle">Toggle</button>
  {{list}}
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>