使用 CSS 和 jQuery 创建自己的 Vue <transition-group> 动画
Create own Vue <transition-group> animation with CSS and jQuery
最近我发现了很棒的随机播放列表动画https://jsfiddle.net/chrisvfritz/sLrhk1bc/
我很惊讶这一点。所以我尝试只使用 CSS 和 jQuery.
来做同样的事情
我自己也试过https://jsfiddle.net/stas0/68Lpwqgk/
但是它不像在 vue shuffle 中那样工作。
正如我之前读到的，我知道元素必须在 DOM 树中移动，但我不知道如何为其添加动画。我想我需要使用转换但无法理解如何使用 transform: translate 但在 vue 示例中我没有找到翻译选项。
所以我的目标是创建简单的洗牌（在我的 link 示例中只有两个项目）就像在 Vue 中一样只有 CSS 和 jQuery.
谢谢。
您在初始示例中看不到任何 translates（或 matrixs，就此而言）转换的原因是因为转换是在 <transition-group> 指令。
如果没有此指令，更改将是即时的。这些元素会跳到它们的新位置。
<transition-group> 所做的是：
- 计算元素在跳跃后的位置
- 对元素应用变换，直到它们到达正确的位置 ，而不改变它们在 DOM[=72 中的顺序=]
- 转换完成后，它 a) 删除所有转换 类 和转换 and b) 执行 DOM 操作。由于这是在单个动画帧内完成的，因此您看不到开关。
这是从转换元素到重新排序元素的跳跃。因为它们位于完全相同的位置，所以 "jump" 不可见。
为了允许控制动画，<transition-group> 将 transition classes 应用于每个过渡元素。
在原来的例子中，
.cell-move {
transition: transform 1s;
}
控制动画，因为：
transform-group 的 name 是 cell。- 变化的类型是
move（转换后的子元素移动它们在父元素中的位置）。
为了更好地可视化正在发生的事情，watch their indexes。
因此，为了复制相同的效果，您需要：
- 计算新的位置（一个方便的方法是制作一个父克隆并以正确的顺序不可见地渲染它）
- 将元素的旧位置与新位置进行比较（在每个位置上使用
getBoundingClientRect）并使用它们将原始元素过渡到克隆的位置
- 动画完成后，从原件中删除所有过渡和变换并执行 DOM 更改（请注意，您可能会想简单地用克隆替换原件 - 因为从技术上讲，它们已经在正确的顺序 - 但你真的不想那样做 - 你会丢失所有绑定在原件上的事件！）
- 删除克隆
重要说明：您不必在 DOM 中实际插入克隆来计算新位置，但这样做会使事情变得更容易，尤其是如果你不了解幕后发生的一切。
重要的是克隆不会在文档的 Layout 和 Paint 层中触发重绘。它基本上必须在整个 life-cycle.
中具有 position:absolute
即使你的问题有不同的风格（即："How does Vue do it?"），从技术上讲，你的问题之前已经被问过和回答过。例如，使用 clone and/or transition 快速搜索我的答案可能会弹出类似的答案。这里是 a similar one.
最近我发现了很棒的随机播放列表动画https://jsfiddle.net/chrisvfritz/sLrhk1bc/ 我很惊讶这一点。所以我尝试只使用 CSS 和 jQuery.
来做同样的事情我自己也试过https://jsfiddle.net/stas0/68Lpwqgk/ 但是它不像在 vue shuffle 中那样工作。
正如我之前读到的，我知道元素必须在 DOM 树中移动，但我不知道如何为其添加动画。我想我需要使用转换但无法理解如何使用 transform: translate 但在 vue 示例中我没有找到翻译选项。
所以我的目标是创建简单的洗牌（在我的 link 示例中只有两个项目）就像在 Vue 中一样只有 CSS 和 jQuery.
谢谢。
您在初始示例中看不到任何 translates（或 matrixs，就此而言）转换的原因是因为转换是在 <transition-group> 指令。
如果没有此指令，更改将是即时的。这些元素会跳到它们的新位置。
<transition-group> 所做的是：
- 计算元素在跳跃后的位置
- 对元素应用变换，直到它们到达正确的位置 ，而不改变它们在 DOM[=72 中的顺序=]
- 转换完成后，它 a) 删除所有转换 类 和转换 and b) 执行 DOM 操作。由于这是在单个动画帧内完成的，因此您看不到开关。
这是从转换元素到重新排序元素的跳跃。因为它们位于完全相同的位置，所以 "jump" 不可见。
为了允许控制动画，<transition-group> 将 transition classes 应用于每个过渡元素。
在原来的例子中，
.cell-move {
transition: transform 1s;
}
控制动画，因为：
transform-group的name是cell。- 变化的类型是
move（转换后的子元素移动它们在父元素中的位置）。
为了更好地可视化正在发生的事情，watch their indexes。
因此，为了复制相同的效果，您需要：
- 计算新的位置（一个方便的方法是制作一个父克隆并以正确的顺序不可见地渲染它）
- 将元素的旧位置与新位置进行比较（在每个位置上使用
getBoundingClientRect）并使用它们将原始元素过渡到克隆的位置 - 动画完成后，从原件中删除所有过渡和变换并执行 DOM 更改（请注意，您可能会想简单地用克隆替换原件 - 因为从技术上讲，它们已经在正确的顺序 - 但你真的不想那样做 - 你会丢失所有绑定在原件上的事件！）
- 删除克隆
重要说明：您不必在 DOM 中实际插入克隆来计算新位置，但这样做会使事情变得更容易，尤其是如果你不了解幕后发生的一切。
重要的是克隆不会在文档的 Layout 和 Paint 层中触发重绘。它基本上必须在整个 life-cycle.
position:absolute
即使你的问题有不同的风格（即："How does Vue do it?"），从技术上讲，你的问题之前已经被问过和回答过。例如，使用 clone and/or transition 快速搜索我的答案可能会弹出类似的答案。这里是 a similar one.