用v-move过渡元素组的问题（过渡组）

Question

我在转换网格中的项目列表时遇到问题。使用过滤器时，我希望元素移动到最新位置，但也要淡出不再包含在过滤列表中的项目。我已经看到了很多示例，但是我自己无法以某种方式解决问题。甚至我完全不知道如何过渡小组。

我试图用以下代码创建一支钢笔来展示我的问题https://codepen.io/jfrdfr/pen/PrqXrB：

.items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  position: relative;
}
.items-enter-active,
.items-leave-active {
  transition: all 3s linear;
}
.items-leave-active {
  position: absolute;
}
.items-move {
  transition: transform 3s;
}
.items-enter,
.items-leave-to {
  opacity: 0;
}
.item {
  background: hotpink;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

我什至试图在beforeLeave挂钩中设置元素的位置，但是我认为这行不通，因为并非所有元素都被绝对定位。有人解决了这个问题吗？

我已经制作了实际应用的屏幕截图：

我查找的示例：

• https://codepen.io/udyux/pen/EwwPgr
• https://vuejsexamples.com/shuffle-deck-of-cards-transitions-with-vue/
• https://vuejs.org/v2/guide/transitions.html#List-Move-Transitions

我希望有人能帮助我！

非常感谢， 杰弗里