javascript - 使用 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

您没有看到任何 translate 的原因s(或 matrix s，就此而言)在初始示例上进行转换是因为转换是在 <transition-group> 中执行的指令。

如果没有此指令，更改将是即时的。这些元素会跳到它们的新位置。 什么<transition-group>做的是:

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

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

在原来的例子中，

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

控制动画，因为:

• name的 transform-group是cell .
• 变化的类型是move (转换后的 child 移动他们在 parent 中的位置)。

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

---

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

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

重要说明:您不必在 DOM 中实际插入克隆来计算新位置，但这样做会使事情变得更容易，特别是如果您不了解背后发生的一切场景。
重要的是克隆不会在文档的 Layout 和 Paint 层中触发重绘。它基本上必须有 position:absolute贯穿其整个生命周期。

---

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