问题标签 [vue-transitions]

我的组件结构如下：

我想围绕每一个进行过渡。我唯一的选择是明确删除v-else并检查"v-if="!this.showData"如下：

还是有其他方法可以保留我的 v-if/else - 它只是让我感觉更干净。

我一直在努力<transition-group>工作，但我就是想不通。单击该框后，元素将更改其位置-假设触发v-move类。这是我正在查看的 Vue 文档的特定部分。

这是我的测试应用程序的链接

一个简短的问题，因为我是 Vue 转换的新手。我的问题是是否可以在不重新渲染的情况下将过渡应用于元素/组件。因此，不能使用 v-if 或 v-show。我的用例是通过按下两个不同的标题栏按钮来扩展和缩小 div 组件，因此我不希望元素在转换时重新渲染。谢谢解答！

从下面的代码中，我想在按下“最大化”按钮时应用扩展过渡，并使用“最小化按钮”反转过渡

我有这个问题我已经打了好几个小时了；我不明白为什么它不能按预期工作。

我在下面粘贴了一个示例代码。问题是在编辑名称时，{{name}} 没有更新。但是，如果我删除<transition>元素或v-if="show"条件中的任何一个，则数据绑定将按预期工作。如果将{{name}}放置在过渡之外，则相同。

所以看起来过渡块数据绑定？但是，我在文档或其他地方没有找到任何关于它的信息。我在 Vue2 操场上测试了这段代码，它按预期工作（数据绑定工作）。所以行为似乎取决于 Vue3。

有什么我想念的吗？这是Vue3中的错误吗？

提前感谢您的任何意见或想法。

我看到一些我不理解的 Vue 转换行为。通过展示一个例子会更容易解释：

给定以下组件：

以下情况属实：

• 过渡名称有适当的 css 类，.slide-left它们.slide-right的名称所暗示的。
• 的初始状态transitionName是slide-right
• 的初始状态showMe为真

单击按钮时，我希望 div向左滑动。但是，它向右滑动。

此处提供了完整的可重现性：

它包含“左”和“右”按钮，但无论您单击哪个，组件都会“向右”滑动。

我可以通过将按钮的回调更改为此来修复它：

但我想知道为什么nextTick这里有必要，以及是否有更好的方法来解决一般问题。

我一直在寻找这个问题的解决方案很长时间，但我似乎无法找到这个问题的最佳解决方案。基本上我有一个手风琴，当用户打开它时，它应该轻轻滑下并有一个很好的过渡。

我很确定只有 css 才能做到这一点。如果我错了，请纠正我，但 css 转换在性能方面比 js 转换更好。

所以现在我面临的问题的HTML：

而CSS是：

这导致不流畅的过渡。滑下来好像没什么问题，但是滑上去就真的很卡顿，一点都不流畅！如果我设置max-height: 10rem它并没有让它变得更好。我希望有人可以调试帮助我解决这个问题，也许可以教育我更多关于 vue 转换和 js 与 css 转换的知识。

编辑：
只是为了澄清过渡本身应该只由css。手风琴的开口是用js的，很好。此外，如果能看到一个使用原生 vue-transition 组件的转换示例，那将是一件好事。

编辑 2：
这是一个代码框，它与我有同样的问题。 https://codesandbox.io/s/frosty-bash-lmc2f?file=/src/components/HelloWorld.vue

我只想知道如何在 vue.js 中的页面与第三页之间进行转换。

喜欢主页到关于页面，在过渡的中间我放了一个带有品牌标志的页面。

就像他们在这里做的那样：https ://www.details.co.jp

谢谢。

我已经实现了 VUE js 的页面转换。我手动执行此操作，因为我找不到如何使用 VueS 转换来执行此操作。

（我正在为 vue js 使用 gridsome 框架 - 我添加了一个自定义 App.vue 页面 - 它应该允许 gridsome 的转换像普通的 Vue js 转换一样）

我觉得我所做的事情对于它的用例来说太臃肿了，所以想看看是否有人知道如何使用 vue 转换来实现它。

我有这个工作供参考，只需点击客户（请尽量不要对我评价太多，它仍在开发中） - https://wtwd.ninjashotgunbear.com/

我的方法：

SectionTitle当用户单击其中一个组件时，每个组件都是具有$emit该页面数据的特定 obj（例如要路由到的页面的颜色和名称）-@routeChange="reRoute($event)如下所示：

这会触发我在 UI 视图上移动 div 并创建过渡效果的方法：

用于 DIV 的 CSS：

在页面上，我使用安装的钩子从用户视图中删除 div（与我在上面添加它的方式相同，但相反。

如果您知道如何在更简洁的代码中/或通过使用 VUES 转换属性来做到这一点，那么非常欢迎您的帮助。我认为 VUE 会有一个特定的方法来做到这一点，但还没有找到。

在此先感谢-W

我正在尝试构建一个日历组件，当我单击下一个或上一个时我想要一个过渡，我也想在滑动时添加一个过渡，但是我无法使 vue 过渡工作。我只有一个元素（当前月份），点击下一步或上一个后，它所做的只是更改数据。为了能够添加动态变换：翻译，因为我需要在滑动时获取鼠标位置，我应该创建3个元素（上个月，当前月，下个月）？或者我可以让这项工作只改变数据吗？

我在 vue docs 上尝试了最简单的示例，每次单击按钮时，转换都不起作用。

这是我的日历组件。

我有一个包含表单的项目。当后端成功接收到表单后，我们应该用另一个按钮交换按钮，以向用户确认他的请求已通过。

但是当我尝试使用 Vue 和转换来做到这一点时，我可以让按钮交换，但淡入和淡出不起作用。按钮只是立即交换。

这是模板内按钮的转换：

这是我的局部变量 valid 正在更改的函数。此时我正在使用超时来模拟将表单发送到后端。当您将表单发送到后端时，第一个 setTimeout 模拟了一个小的延迟。第二个超时是通过更改本地有效变量来显示成功按钮 2 秒：