Vue.js 如何在Vue中实现平稳过渡？

以下是我的待办事项项目的链接：

这是存储库：

我的问题是：如何通过删除任务来实现任务之间的平稳过渡

例如：当您删除一个任务时，右侧或左侧的任务将顺利转到其新位置

非常感谢您的关注和时间来帮助我

下面是相关代码的相应部分

x
{{task.name}

导出默认值{
道具：{
任务：{type:Object，必需：true}
},
计算：{
stateClass（）{
返回{
挂起：this.task.pending，
完成：！this.task.pending
};
}
}
};
字段集{
显示器：flex；
边界：无；
填充：0；
保证金：0；
}
字段集p{
显示器：flex；
证明内容：中心；
对齐项目：居中；
保证金：自动；
颜色：米色；
}
.任务{
位置：相对位置；
框大小：边框框；
宽度：20雷姆；
身高：5雷姆；
填充：10px；
边界半径：8px；
字号：2rem；
字体大小：300；
光标：指针；
用户选择：无；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.待定{
左边框：12px实心rgb（7,7150）；
背景色：#0a0455；
}
.完成{
颜色：#ddd；
左边框：12px实心rgb（59,55,55）；
背景色：rgb（12,1,1）；
文字装饰：线条贯通；
}
.待定。关闭{
背景色：rgb（7,7150）；
颜色：米色；
}
.完成，结束{
背景色：rgb（59,55,55）；
}
.结束{
位置：绝对位置；
右：2px；
顶部：2个；
字体大小：0.9rem；
字号：600；
高度：20px；
宽度：20px；
边界半径：10px；
显示器：flex；
证明内容：中心；
}

看看官方文档中的示例-谢谢，@IVOGELOV。阅读文档后，我将其替换为，任务消失了。如果上面问题中的代码是您的任务组件，并且您有一行这样的组件，那么我删除了它-您应该使用

而不是每个组件来包装整个任务组。如果您仔细阅读文档中的示例，您会注意到他们在

转换组中使用
v-for
，这是任务组件，但我无法理解您说的“您应该包装整个任务组”。你是说App.vue内部？无论如何，再次感谢您，下次我会更仔细地阅读文档。最后一件事，这里是沙箱（）。如果您（或任何人）有时间检查一下，让我看看我遗漏了什么，我会非常感激。我的观点是您在
Task.vue中使用
，而您应该在
TaskGrid.vue中使用
而不是
内部
TaskGrid.vue
。