问题标签 [vuejs-transition-group]

我有一个项目列表，包含在一个 javascript 数组中。类似于vue.js 文档中的示例。

这是我正在努力解决的工作流程：

• 用户点击“添加”。
• 我立即将一个项目添加到列表中（在他们要求的位置）
• 我向服务器发送 ajax 请求以创建项目。
• 调用返回新项目的数据库行。

我正在使用数据库主键作为我的 vue 键——我无法知道 ajax 调用最终返回给我。但是，如果我只是简单地更新对象上的 ID，我最终会将该行转换出来然后再转换回来。

有没有办法告诉 vue 我正在更改项目的 ID？

我理想的情况是这样的：

注释掉的行是导致不希望的转换的行。

有人投票将其作为此问题的副本关闭-据我所知，它正在谈论如何动态设置 ID，这在我的示例中已经在做。不过，请随时澄清它如何帮助我解决问题。

我有一个写成转换组组件的滑块：

在我的<style>我有这个：

我的方法中有两个函数可以让我的幻灯片移动：

我所有的幻灯片目前只是组件中的一个硬编码数组，data()其中包含三个对象，其中包含一个图像和一些状态。现在我无法为幻灯片制作动画，也无法在单击调用这些功能的按钮后，而不是设置间隔。我究竟做错了什么？

我遇到了过渡组的问题。问题是我正在尝试渲染按某些条件过滤的列表。在我的示例中 - 取决于最小/最大界限。

如何修复？

最初，我尝试使用在转换组内呈现的数组的计算值。但显然，每次更新范围滑块值时，它都会返回新数组。因此，我尝试使用@input事件处理程序来更新列表，该列表仅在需要更新时才呈现。最让我困惑的是我试图为@enter @enter-to @leave @leave-to事件设置转换组挂钩并且它们被正确触发。就一次。我也尝试过使其由 JS 驱动，但即使我设置了:css="false" :duration="500".

我做了一个简单的例子来说明这个问题。码沙盒.io

我期望的是列表（数组）得到更新，然后它触发转换组内容重新渲染。并执行 FLIP 动画。但问题是，如果用作过滤条件的值快速更改（例如，用户使用鼠标拖动范围滑块）动画要么根本不执行，要么导致滞后。从左到右拖动范围滑块（动画滞后）时准确观察行为，它与从右到左拖动它时看到的不同（第一个元素不执行动画）。另请注意，如果您单击滑块设置值 - 动画将按预期执行。

我有一个基于 vuejs 官方文档中提供的示例的待办事项列表。

示例：https ://jsfiddle.net/87Lfbzng/

这样做的问题是项目被立即删除/添加，没有动画。如果我transition按照官方文档实现标签生效。VueJS 转换

我试过把转换标签放在里面ul，但也没有用。

我目前的尝试：https ://jsfiddle.net/87Lfbzng/

CSS

标记

我有一个transition-group包含两个或多个图像。这是有效的，但现在我想预加载下一张图片。

这就是我现在所拥有的：

每次我更新currentIndex时，currentImg都会被计算出来，这样就可以了。现在我需要预加载currentIndex + 1图像。这可能吗？

所以，看看这个小提琴。在将新的多个元素添加到呈现的列表时，我想从 vue 功能添加过渡动画。我已经尝试transition-group使用属性添加tag="div"。但是，元素仍然没有添加动画。有什么建议吗？

我得到了一个网格项目列表，以及一个在“多看”和“少看”之间切换的按钮。单击“查看更多”按钮，将显示所有列表。点击少看，只显示3个项目。当显示所有项目时，我们得到了一个很好的过渡，但是当我们隐藏它们时，底部的所有元素都不会跟随运动。我怎样才能使过渡顺利，不要让用户在段落中间？

模板示例：

我使用那些 css 属性进行过渡

脚本如下：

https://jsfiddle.net/ghivalla/v5me216c/3/

我想用 vue 的转换组在循环中为列表项设置动画。我希望始终为添加的项目设置动画。但我总是让最后一个动画。对文档/问题的研究表明这通常是一个关键问题：密钥需要唯一的 id。现在我不能从我在那里输出的数组中获取 ID，因为我正在随机输出，所以键是重复的（实际上我得到了一个重复的元素控制台错误）。

所以我基于这个建议来获得一个唯一的 id。

脚本：

模板：

CSS：

输出 {{ audioLogItem.id }} 而不是 {{ audioLogItem.text }} 实际上每次点击都会给我 2、3、4 等等。但它似乎不能在循环中使用，因为仍然总是最后一个孩子被动画，而不是第一个。

我的问题：我怎样才能设法总是让添加的项目成为动画，所以列表中的第一个？

我正在练习 Vue转换组并专门在此特定部分中模仿 Vue 文档示例。

问题是我的示例将仅在结束元素而不是正在添加/删除的元素上应用动画。

有人可以解释我做错了什么吗？：（ 谢谢。

这是应用程序的链接以获取更多说明

我正在努力弄清楚为什么我的过渡组在从列表中删除第一个元素时没有正确设置动画。我尝试制作一个最小的、可重现的示例以首先在我的本地机器上共享，并且成功了。然后我将相同的代码复制到 CodeSandbox 以与 StackOverflow 共享，但由于某种原因问题不再存在。

这是正常工作的CodeSandbox示例，这里是在我的本地机器上服务时产生问题的相同代码的记录。

在录音中，您会看到前两个元素已正确删除。它们向右平移并淡出，随后的元素平滑地向上过渡以填充空白空间。

但是，当我在接下来的两次单击中删除第一个元素时，离开的元素会正确过渡，但后续元素会立即跳转。

该问题在 Chrome、Firefox 和 IE 中产生。知道为什么它在 CodeSandbox 中正常工作，但在我的机器上却没有，尽管有类似的代码？