问题标签 [vue-transitions]

我的代码中有这个设置：

这些类没有被应用，但它们确实存在。当我手动添加它们时，一切正常。所以我不确定为什么这不起作用。只是不appear工作<transition-group>吗？

我有一个带有嵌套子路由的父路由。

router-view父路由（子加载到）中的transition. 我的理解是，这应该在进入/离开路线时让孩子进出。

默认情况下不会发生任何转换。向过渡添加一个appear道具可以修复进入过渡，但不能修复离开。

这是特定于它是嵌套路由的事实吗？如果是这样，是否有解决它的最佳实践？

这是一个简化的测试用例：https ://stackblitz.com/edit/vue-y6bbb6?file=src%2Fviews%2FParent.vue – 单击页面顶部的“子”和“父”链接。

所以我尝试在 css 上进行页面转换，但leave转换不起作用，所以我尝试使用JS Hooks，但留下动画仍然不起作用。我试着评论每一步，我发现leave甚至没有被调用。

脚本：

模板：

我已经阅读了转换的文档，我什至复制了他们的代码并按原样粘贴，但似乎仍然没有区别。我用过yarn create nuxt-app，所以你会认为我正在进行最稳定的更新

我定义了一个主菜单组件（vue 2.6.11），它基本上是标准的 Bootstrap 菜单。不是 bootstrap-vue，而是纯 bootstrap。

在我的最后一个菜单条目中，我需要一个额外的右边距来容纳我在其中一个页面上拥有的其他内容。我希望余量能缓和一些，以使体验不那么刺耳。所以我这样宣布：

目的是菜单的整个右对齐部分会在添加边距时缓慢地向左滑动，并在删除边距时回到浏览器右边缘。

但是，这不起作用：如果我明白了什么，因为浏览器根本看不到过渡，因为 DOM 从 v-dom 重新渲染。我至少在这个评估中是对的吗？

我将如何正确处理这个动画？

我有这个 Vue3 Root 组件，显示了一个组列表，其中每个组可以有 n 个条目。

EntryItem 组件呈现每个组的条目。删除条目后，这也应该向右滑出。

如果我删除一个组，它会向右滑出。但是，删除条目不会动画。它只是被删除了。

知道出了什么问题吗？

我正在尝试使用由 vue-router（vue-router 4 和 vue 3）切换的垂直窗格制作类似手风琴的用户界面。这里给出了一个非常紧凑的例子。垂直排列有3个平底锅，路由器切换其中的一些内容。这个概念有效，但我希望窗格平滑地收缩和扩展。我确信带有 css 动画的组件可以解决该任务，但无法找出正确的样式。

我尝试根据样式应用 js 转换，但它的行为很奇怪：

如果有人帮助我，我将不胜感激。

我有一个带有转换的包装器组件：

然后，我用来自路由器的一些组件填充默认插槽，如下所示：

而且我收到 [Vue Router warn]: <router-view> can no longer be used directly inside <transition> or <keep-alive>.警告，这似乎很奇怪，因为我使用了正确的语法恕我直言。这是有意的，如果是这样，我错过了什么？

注意：它工作正常，我只是不喜欢看警告:)

编辑：更多上下文 - 我正在尝试为桌面和移动设备创建包装器，而桌面设备应该具有上述转换。移动设备包装器的完成方式完全不同，此处不相关。

我正在构建一个 Vue 应用程序。我有两个相互关联的组件。其中一个被调用loginRegister.vue，其代码在这里：

登录注册.vue：

另一个调用BaseModal.vue，代码在这里：

BaseModal.vue:

有一些代码与这个问题无关，我也试图简化代码并澄清与我的组件代码相关的transition部分slot。

尽管代码可能看起来很长或很复杂，但我想要达到的目标很简单。我想在模态组件中提交注册表单。实际上，我的应用程序中的用户单击注册按钮，然后BaseModal.vue显示该组件。在这种情况下，注册表单（为简单起见，我用h4标签代替）是用户可以看到的默认内容。根据流程成功或出现错误提交表单后，我想向用户显示一条消息并将按钮的文本从提交更改为如果出现错误重试。之后，当用户单击try again按钮时，表单（h4标签）必须再次淡入。所以我在我的组件中尝试了v-if/v-else-if/v-elseVue 的结构。loginRegister.vue我使用的代码transition part与使用Vue文档的代码类似，但转换无法正常工作。在我的本地开发环境中，h4标签顺利消失，然后再次单击标签淡入后try again没有显示任何消息。h4同样在控制台中我可以看到这个警告：

但我认为这与我的问题无关，因为我没有在我的应用程序的多元素上使用过渡。那么有人可以帮我看看我的代码有什么问题吗？

我有一组元素显示/隐藏/重新排列过渡组，没什么特别的。

这很好用，除非在动态高度父容器是元素流的一部分的情况下。父级立即捕捉到 FLIP 动画的最后阶段，而过渡组的内容则顺利完成它们的工作。

虽然从功能上讲它为什么会发生是有道理的，但它远非理想。

有没有一种直接的方法可以连接到 Vue FLIP 动画以获取父级的 First 和 Last 属性，这样我就可以设置过渡的最大高度？

我的尝试

从理论上讲，我认为before-enter或者before-leave会在转换之前捕获元素的高度，这将锁定父级的第一个高度。然后enter或leave将在元素从流中添加/删除后立即捕获新元素，并给出 Last 高度。最后，当动画完成后，只需将最大高度设置回无，这样它就可以正常运行。

但这不是那样的。即使过渡时间增加到 5 秒，我也看到 max-height 在一瞬间被设置为一个数字，然后立即回到“无”。也许我误解了 Vue 动画钩子的生命周期，但是文档在确切的执行上似乎有点稀疏。

我真的认为这应该很容易，但我在任何地方都找不到：

我有一个具有固定宽度并传递文本的组件，因此更改大小以适应文本。有没有一种方法可以让这种高度变化动画化，而无需手动计算所需的尺寸？

提前致谢