问题标签 [vue-transitions]

我正在尝试学习 Vue.js 并进行基本的淡入淡出。我有一个始终留在页面上的链接列表。单击链接时，我希望淡入和淡出div. 默认情况下div是看不到的。这div包含几个组件。我试图按照文档进行操作。但是，该元素仅在离开时淡出，而在进入时则没有任何反应。我删除了本文档的多余部分并保留了相关元素。

我在 Vue 中有一个项目，我需要在其中显示图像。这些图像包含在 a. 加载页面时，我希望图像一次淡入一个。我添加了一个具有淡入效果的过渡组，并添加了一个功能，其中每个图像都会以一个小的延迟添加。

我似乎没有让图像显示在彼此之后。图像一下子全部显示出来。

我试图将我的代码放入下面的剪辑器中。但我似乎没有让 href 源受到限制。在我的项目中，我使用存储在assets/img文件夹中的本地图像。

我想在两个带有图例的图像之间创建一个平滑的过渡。图像来自图像对象数组。

因为仅适用于单个标签和组件，所以我创建了一个组件来定义图像+图例。

我定义的类是这样的

新图像由方法返回

其中条目是我在数据中定义的数组

this.slide 定期更新，像这样每 10 秒更新一次，这在 created() 部分中定义

该代码有效，因为每 10 秒在 this.slide 中加载一个新图像。但是，转换仅“半途而废”。

没有过渡淡出：“旧图像”消失并为新图像淡入让路。

但是，我想要的是从一个到另一个的平稳过渡。

我已经尝试了不止几个想法，包括使用 mode="out-in" 和 "in-out"，但没有什么能如我所愿。

我在看什么？

我想要什么：我有两个组件，父组件（Wall.vue）和子组件（PostItem.vue）。每个PostItem都有一个删除按钮。单击时，会发送对我的 API 的请求，并从数据库中删除该项目。然后我想调用getPosts父组件的函数再次获取所有帖子（这次没有删除的帖子）。

问题：在子组件内部，我无法访问this.$parent对象（或者更具体地说，它只是空的并且不包含函数），所以我不能调用getPosts-Function。当我删除<transition-group>围绕子组件的父组件时，一切正常。

这里有什么问题？

父组件 (Wall.vue)

模板部分：

脚本部分：

子组件（PostItem.vue）

模板部分

脚本部分：

以下jsfiddle中显示的简单案例：

https://jsfiddle.net/hsak2rdu/

我想交换和动画两个元素，但失败了。正如您在 Playground 中单击切换按钮后看到的那样，第二个元素闪烁到最终位置。

我希望它们同时具有动画效果，就像相互交叉一样。是否可以？

模板：

JS：

我有两个按钮，单击一个按钮时我需要制作元素滑动 vue 过渡效果，单击另一个按钮时我需要制作元素淡入淡出 vue 过渡效果。

我知道它不起作用，因为计算发生在模板更新之后。有没有其他方法可以解决这个问题。提前致谢。

你好这是一个简单的代码，但我不知道是什么问题。当我单击父组件上的打开模式时，模式打开但没有过渡，我只是从教程中编写它，在教程中它可以正常工作

我正在使用 vue 3

I have a modal which is a white container on top of a semi-transparent dark backdrop. When this modal is triggered I want the backdrop to fade in, and after that I want the white container to slide up from bottom of the screen.

But while the fade-in works, the slide up doesn't. What am I doing wrong?

Template:

CSS animation:

Codesandbox

标题几乎解释了一切。我已经在 StackOverflow 上搜索了解决方案，但他们都没有 帮助。

使用经典模态组件的示例：

（控制台中也没有错误）

但是，使用时一切正常v-show。但我不能在我的项目中真正使用它来代替 v-if 。

也就是说，我必须在使用模态的所有地方进行包装<modal>，并从模态本身中删除过渡（这听起来不太好）<transition>

为什么会这样以及如何使输入动画起作用（使用v-if, 和<transition> 在模态组件中？

我注意到 Vue 2.5（而不是 Vue 2.6）没有这样的问题。从那以后肯定发生了一些变化。

我有以下页面，其中包含在转换标记中的 2 个父组件。他们之间的过渡顺利进行。

Page.vue 有 2 个组件：WithdrawalRequest 和 WithdrawalConfirm

子组件 WithdrawalConfirm 也有 2 个包装在转换中的 v-cards。

这是一个简单的例子，但它也不起作用。我真的不明白为什么第二次过渡根本不起作用。我错过了什么吗？我已经花了几个小时进行测试。