Javascript 在Vue组件渲染上同时过渡多个元素

下面的JSFIDLE中显示了一个简单的示例：

我想交换两个元素并设置其动画，但失败了。正如您在操场中单击切换按钮后所看到的，第二个元素将闪烁到最终位置

我想让他们两个同时活跃起来，就像互相交叉一样。可能吗

模板：

<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>

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);
    }
  }
});

---

唯一必要的更改是将

v-for

包装在

中：

{{{u d.text}{{{u i}}

从：

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

下面是一个演示：

newvue({
el:“#应用程序”，
数据：（）=>({
秀：没错，
名单：[
{
id:1，
正文：“第一”
},
{
id:2，
正文：“第二”
}
]
}),
方法：{
句柄：函数（）{
log（“DEBUG”，this.list）
让a=JSON.parse（JSON.stringify（this.list[0]）；
让b=JSON.parse（JSON.stringify（this.list[1]））
此.$set（此.list，0，b）；
此.$set（此.list，1，a）；
}
}
});
.dom{
位置：绝对位置；
过渡：所有1s线性；
不透明度：1；
}
钮扣{
边缘顶部：50px；
}
#应用程序{
边缘顶部：50px；
位置：相对位置；
}

{{{u d.text}{{{u i}}
切换
{{list}}