问题标签 [vuejs-transition-group]

我正在尝试创建一个图像滑块，它会淡化图像。图像 1 应该在图像 2 淡入的同时淡出。换句话说：它们之间不应该有间隙。现在它没有什么比褪色更重要的了。该代码正在运行，到目前为止，当用户单击“下一步”时，当前图像消失，0.9 秒后出现下一个图像。它们之间有 0.9 秒的延迟（与 CSS 中声明的数量相同），因此它以某种方式识别转换时间。它只是不褪色，单击按钮后它立即消失。我错过了什么？

我的代码

对此有一个建议的答案，但该解决方案对我不起作用。我有一个嵌套v-for并希望在最里面的 li 元素被我的计算语句删除或添加时为其设置动画。我当前的代码如下所示：

外部过渡组工作正常，但是当我设置内部过渡组时，我得到了

ReferenceError：未定义字母。

我尝试按照这里:letter="letter"的建议添加，但它仍然不适合我。有什么建议么？如果有一种更有意义的方法，我很乐意重新格式化代码。

编辑：为了回应这里的一些评论，首先，我将 Vue 注入到基于 PHP 的 Wordpress 模板中，因此我无法创建单独的组件。我不知道这是否是导致问题的部分原因，或者为什么你们中的一些人可以毫无错误地运行代码。

这是正在迭代的 JSON 示例：

我在尝试为从列表中删除的项目设置动画时遇到问题（使用转换组）。布局非常简单。屏幕顶部有一个错误列表，该列表下方有一个按钮，用于从错误数组中删除最后一个元素。这种布局一切正常。当在列表和按钮之间添加一些内容时，问题就开始了。如果内容大到足以将错误列表推出视口，则当按下按钮时，内容会“闪烁”（或“抖动”）。奇怪的是，这种行为不会在 jsfiddle ( https://jsfiddle.net/gaqmbr7s/ ) 中复制，但只有在我在本地运行项目时才会复制。

这是演示此行为的屏幕记录

这是我的代码：

模板（添加了一些虚拟内容）：

Javascript：

款式：

我完全被这件事难住了。出于某种原因，Vue3 将正确地为<transition-group/>包含项目列表的移动动画类应用，但前提是列表向前推进。我为此编写了一个 CodePen，即使有一个非常简单的用例（列出数字），如果您向除向后之外的任何方向前进，转换类也不会被应用。

https://codepen.io/monitorjbl/pen/vYZPzXO

如果单击“-”按钮，将应用动画类，您可以看到移动动画触发。但是，单击“+”按钮会导致不应用任何移动动画类并且根本没有动画。