Question

最近，我发现了很棒的动画，其中包含随机播放列表https://jsfiddle.net/chrisvfritz/sLrhk1bc/ 我对此感到惊讶。因此，我尝试通过仅使用CSS和jQuery来做到这一点。

我也尝试自己做https://jsfiddle.net/stas0/68Lpwqgk/ 但这并没有像vue shuffle那样起作用。

正如我在理解之前所读到的那样，元素必须在DOM树中移动，但是我不知道如何向其中添加动画。我猜测我需要使用转换，但不知道如何使用transform: translate，但是在一个示例中，我没有找到翻译选项。

所以我的目标是像在Vue中那样仅使用CSS和jQuery创建简单的洗牌（在我的链接示例中，只有两项）。

谢谢。

Answer 1

在初始示例中，您看不到任何translate（或matrix）转换的原因是，这些转换是在<transition-group>指令中执行的。

没有此指令，更改将立即生效。这些元素将跳到其新位置。 <transition-group>的作用是：

计算元素在跳跃后的位置
将变换应用于元素，直到它们到达正确的位置 而无需更改其在DOM中的顺序
转换完成后，它 a）删除所有过渡类，并转换和 b）执行DOM操作。由于此操作是在单个动画帧内完成的，因此看不到开关。
这是从变形元素到重新排序元素的跳跃。因为它们位于完全相同的位置，所以“跳转”不可见。

为了允许控制动画，<transition-group>将transition classes应用于每个过渡元素。

在原始示例中，

.cell-move {
  transition: transform 1s;
}

控制动画，因为：

为更好地可视化正在发生的事情，watch their indexes。

因此，为了复制相同的效果，您需要：

计算新位置（一种简便的方法是制作一个父克隆并使其以不正确的顺序可见地呈现出来）
比较元素的旧位置和新位置（在每个位置上使用getBoundingClientRect），并使用它们将原始元素转换为克隆位置。
完成动画后，从原始图像中删除所有过渡和转换并执行DOM更改（请注意，您很容易将原始图像替换为克隆，因为从技术上讲，它们已经按照正确的顺序排列了- 但是您真的不想这么做 -您会丢失与原件绑定的所有事件！）
删除克隆

重要提示：：您不必在DOM中实际插入克隆即可计算新位置，但这会使事情变得容易，尤其是如果您不了解后面发生的一切时场景。
重要的部分是克隆不会触发文档的“布局”和“绘画”层中的重绘。它在整个生命周期中基本上都必须有position:absolute。

即使您的问题具有不同的风格（即：“ Vue的功能如何？” ），但从技术上讲，您的问题已被问过并回答过。例如，使用clone和/或transition快速搜索我的答案可能会弹出类似的答案。这是a similar one。