如何使用Vue.js设置todo从一个列表移动到另一个列表的动画？

我正在尝试使用Vue.js制作todo移动动画

下面你可以找到我到目前为止所做的事情。只需点击待办事项即可查看

newvue({
el:“应用程序”，
数据：{
项目：[
{id:1，名字：'John'，done:false}，
{id:2，名称：'Jane'，完成：false}，
{id:3，名称：'Jade'，完成：true}，
{id:4，名字：'George'，done:true}，
]
},
计算：{
完成（）{
返回this.items.filter（i=>i.done）
},
撤消（）{
返回此.items.filter（i=>！i.done）
}
},
方法：{
切换：功能（todo）{
todo.done=！todo.done
}
}
})

正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
#应用程序{
背景：#fff；
边界半径：4px；
填充：20px；
高度：500px；
过渡：均为0.2s；
}
托多斯先生{
显示：网格；
网格模板柱：1fr 1fr；
}
托多先生{
边框：1px实心#ccc；
}
.todo.undone{
格构柱：2/1跨；
}
.todo.done{
格构柱：1/1跨；
背景：蓝色；
颜色：白色；
}
.翻转列表移动{
过渡：所有1都易于输入输出；
}
.标题包装{
显示：网格；
网格自动流：列；
}
.header、.todo{
显示：网格；
网格模板列：重复（3，1fr）；
填充物：5px；
}

名称
年龄
性别
名称
年龄
性别
{{item.name}
26
男性
{{item.name}
20
男性

您可以通过跟踪

v-for

循环中的

索引来定位第一个元素。索引
0
总是第一个元素。并赋予它以下风格：

网格行开始：1

编辑演示：


newvue({
el:“应用程序”，
数据：{
项目：[
{id:1，名字：'John'，done:false}，
{id:2，名称：'Jane'，完成：false}，
{id:3，名称：'Jade'，完成：true}，
{id:4，名字：'George'，done:true}，
]
},
计算：{
完成（）{
返回this.items.filter（i=>i.done）
},
撤消（）{
返回此.items.filter（i=>！i.done）
}
},
方法：{
切换：功能（todo）{
todo.done=！todo.done
}
}
})
正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
#应用程序{
背景：#fff；
边界半径：4px；
填充：20px；
高度：500px；
过渡：均为0.2s；
}
托多斯先生{
显示：网格；
网格模板柱：1fr 1fr；
}
托多先生{
边框：1px实心#ccc；
}
.todo.undone{
格构柱：2/1跨；
}
.todo.done{
格构柱：1/1跨；
背景：蓝色；
颜色：白色；
}
.右一{
网格行开始：1；
}
.翻转列表移动{
过渡：所有1都易于输入输出；
}
.标题包装{
显示：网格；
网格自动流：列；
}
.header、.todo{
显示：网格；
网格模板列：重复（3，1fr）；
填充物：5px；
}

名称
年龄
性别
名称
年龄
性别
{{item.name}
26
男性
{{item.name}
20
男性

如果数组中有6个以上的项，则将
网格行开始
添加到第一个撤消的元素将不起作用

作为一种解决方案，我使用
v-for
循环的
索引
添加到每个撤消中，以执行相应的
网格行开始

索引
从0开始，因此我们必须使
索引+1

  <div
    class="todo undone"
    v-for="(item, index) of undone"
    :key="item.id"
    :style="{'grid-row': index + 1}" // => HERE we guarantee no gaps are present in undone list`
    @click="toggle(item)"
  >
    <span>{{item.name}}</span>
    <span>20</span>
    <span>Male</span>
  </div>

在此，我们保证未完成列表中不存在任何间隙`
@单击=“切换（项目）”
>
{{item.name}
20
男性

你可以找到一个有效的例子
我已经试过了，但不起作用。您无法将第一个撤消的目标设置为目标，因为您无法看到它。目标的第一个撤消操作是空行。即使你再次抓到第二个，它也不会工作。我让它工作了，检查我添加到帖子中的代码片段……正如我在针对第一个撤消的第一条评论中提到的，它不会工作。在您的示例中，如果在数组中添加6项，您将看到它不起作用。不过，我对我的问题补充了一个答案，效果很好。