问题标签 [vuejs-transition]

我有以下项目：https ://codesandbox.io/s/vue-template-c1rj1

我希望图像刚刚从屏幕底部出现已经在页面中间，但它首先从底部出现，然后移动到页面中心。我注意到将通知框类的宽度设置为 100% 可以解决此问题，但我不确定为什么。

我正在关注此CodePen，并尝试将其放入默认的 VueJS 2.0 Boilerplate 中。这就是我将文件拆分的方式：

我在让它运行时遇到了很大的问题。例如我的 App.vue 没有找到state. 这就是我在main.js中定义它的方式：

这是我的App.vue：

这将是我的控件：

..等等。不幸的是我得到：

我在这里做错了什么？如何让这个东西运行？

我正在尝试在两个选项卡之间实现幻灯片过渡。一个选项卡应该来自左侧，将另一个选项卡推到右侧，另一个选项卡则相反。离开过渡进展顺利，但选项卡只是立即弹出而没有从它应该开始的位置开始......我制作了一个 CodePen 来重现我尝试过的内容：CodePen 上的幻灯片过渡测试

这是 HTML，它只是一个包含 2 个按钮的 div，它们改变了代表我的标签内容的两个 div 的可见性。

为了进行过渡，我确实有以下 css ：

有人知道我在这里缺少什么吗？

我正在尝试使用 Vue 过渡组来实现这种轮播/幻灯片效果：

如您所见，他们在上一步上升时为一个列表项（步骤）设置动画，而当前一个在时间轴之后上升，其内容也随之上升。

我不确定我想要完成的事情是否可以使用transition-group，因为整个父块将进行动画处理，而不是子节点。如果是这样的话，如果我至少可以为父块设置动画，我会很高兴。

另一个警告是，当我使用transition-group没有v-if或没有过滤列表时，默认情况下会呈现所有步骤，这并不好。

这是我的 HTML 结构：

这是我的 CSS：

最后但并非最不重要的是，我的组件的脚本：

我正在尝试使用 vuejs 和 gsap 在 h2 之间实现非常基本的幻灯片。根据方向（下一张和上一张幻灯片），我需要 2 种不同类型的转换。为了获得紧凑的代码，我使用了三元运算符?:

如果我使用 2 div 和 v-if / v-else 语法，它工作得很好。我在这里做错了什么？我需要以不同的方式格式化三元返回的内容吗？

所以，

这可能是一个愚蠢的问题，但我无法在任何地方找到答案。从 VueJS 文档中，他们在迁移步骤中说我应该更改我的 package.json 以使用：

但在介绍中，他们说我应该使用：

有什么区别？我是否正确解释它，因为 vue 只是转换存储库？

如果我从 2 > 3 移动，我必须使用 vue 吗？或者我可以立即开始使用 vue-next 吗？（当然有变化）。

可能很愚蠢，但我现在对文档有点困惑。

提前致谢！

我的页面上有多个ValidationObserver，但没有按预期工作：

但它没有按预期工作。

对于第二个输入，验证不起作用。即使我里面有数据，它也会向我显示 message This field is required。

在此处输入图像描述 在此处输入图像描述我的道具在 VUE DEV TOOLS 中一直显示为 $attrs 我尝试使用 inheritAttrs: false 和 v-bind="$attrs" 禁用 attrs，但不起作用

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

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

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

我正在设计登录和注册页面，但没有以任何方式执行转换，我想知道我哪里出错了？

我想要做的是对单击的任何按钮应用淡入淡出，但它不起作用。我是 vuejs 新手，请在评论或评论时记住这一点