使用 CSS 和 jQuery 创建自己的 Vue <transition-group> 动画

Question

最近我发现了带有随机播放列表的很棒的动画https://jsfiddle.net/chrisvfritz/sLrhk1bc/ 我很惊讶这一点。所以我尝试只使用 CSS 和 jQuery 来做同样的事情。

我也试过自己做https://jsfiddle.net/stas0/68Lpwqgk/ 但它不像在 vue shuffle 中那样工作。

正如我之前所读到的，我理解元素必须在 DOM 树中移动，但我不知道如何为其添加动画。我猜我需要使用 transform 但不明白如何使用 transform: translate 但在 vue 示例中我没有找到翻译选项。

所以我的目标是创建简单的随机播放（在我的链接示例中只有两个项目），比如在 Vue 中只使用 CSS 和 jQuery。

谢谢。

Answer 1

在初始示例中看不到任何translates（或matrixs）转换的原因是因为转换是在<transition-group> 指令中执行的。

没有这个指令，改变将是即时的。元素会跳到它们的新位置。 <transition-group> 所做的是：

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

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

在原始示例中，

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

控制动画，因为：

• transform-group 的name 是cell。
• 变化的类型是move（转化后的孩子移动他们在父母中的位置）。

为了更好地了解正在发生的事情，watch their indexes。

---

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

• 计算新位置（一种方便的方法是制作父克隆并以正确的顺序不可见地渲染它）
• 将元素的旧位置与新位置进行比较（在每个位置上使用 getBoundingClientRect）并使用它们将原始元素转换为克隆的位置
• 一旦动画完成，从原件中删除所有过渡和变换并执行 DOM 更改（请注意，您会很想用克隆件简单地替换原件 - 因为从技术上讲，它们的顺序已经正确 - 但你真的不想这样做 - 你会失去所有绑定在原件上的事件！）
• 删除克隆

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

---

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