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

Posted 2023-02-22

【中文标题】使用 CSS 和 jQuery 创建自己的 Vue <transition-group> 动画

【英文标题】：Create own Vue <transition-group> animation with CSS and jQuery

【发布时间】：2019-10-05 23:38:00

【问题描述】：

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

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

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

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

谢谢。

【参考方案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。

【讨论】：

谢谢！似乎我理解这个技巧并做了原始示例它是这样的吗？ jsfiddle.net/stas0/d2z0cotv/4

没错。但不是硬编码translateY(-20px) 和translateY(20px)，您应该通过比较克隆元素getBoundingClientRect 与原始元素getBoundingClientRect 来获得新位置，并应用任何差异。在动画结束时，您删除了transition 效果和 transform 并实际更改了 DOM。但是，是的，这就是它的完成方式。做得好！注意getBoundingClientRect 是 dom 元素的属性，而不是 jQuery 包装器的属性。所以你必须比较：$elem.get(0).getBoundingClientRect().top（或left，分别）。

谢谢！你帮我满足了我的好奇心:--)