问题标签 [vue-transitions]

所以，看看这个小提琴。在将新的多个元素添加到呈现的列表时，我想从 vue 功能添加过渡动画。我已经尝试transition-group使用属性添加tag="div"。但是，元素仍然没有添加动画。有什么建议吗？

可以在此处找到该错误的演示：https ://github.com/Twinbird24/vue-scale-transition-example/tree/simplified

可以在此处找到该错误的视频演示：https ://gofile.io/?c=4HwzAT

这是 Stackblitz 上的代码：https ://stackblitz.com/edit/vuejs-starter-ndpy8b?file=styles.css 。单击 css 文件 (styles.css) 以更改比例，您会发现错误。

在上面链接的 GitHub/Stackblitz 中找到的代码包含两个通过使用 Vue 转换淡入和淡出的 div。第三个 div 绝对位于这些过渡 div 之上。当您更改包含所有这些 div 的容器的比例时，就会出现该错误（查找注释的 CSS 以了解错误的来源）。在某个点之后，第三个绝对定位的 div 的 z-index 会中断，它会被过渡的 div 覆盖。这个错误出现在 Chrome 中，但在 Firefox 中似乎并不明显。

我正在做一个研究项目，vue-cli尽管它是一个简单的项目，但我正在尝试应用我一直在学习的一些东西。

我有两个标题routes：

• 文件夹
• 股票

fade一旦进入这两个中的任何一个，我都设置了一个简单的动画routes。

这里有两个问题，我认为两者都是相关的。code在按照下面列出的块发布后，我将进入它。

我将在下面发布我的代码：

Header.vue（这是我的标题）

Stocks.vue（这是显示股票的地方）

投资组合.vue

main.js

store.js

类型.js

altAnims.js（这是我玩这个动画的地方）

首要问题

我尝试做的第一件事是创建一个简单的动画fade，你们可以在Stocks.vue&Portfolio.vue文件上看到，它应该由.@clickHeaders.vue

好吧，第一个问题是，由于某种原因，当我重新加载页面并第一次触发两者@click event中的任何一个时，Profile.vue或者不会发生。但是在彼此之间切换后，它开始工作。Stocks.vueanimation

我不明白为什么它在第一次单击时不起作用，因为您可以altAnims.js将这state两个项目的最初设置为false.

然后一旦提交actionof mutatingthe ，正如您在反转他们的陈述state的进展中所看到的那样，在第一次点击时应该阅读 a with the of to ，因为您可以看到事件在altAnims.jsBooleanv-ifgetterstatefalsetrue@clickHeader.vue

第二期

尽管我一开始没有解决这个问题，但我试图继续前进。

这就是我试图做的@Portfolio.vue

我添加了一些，所以每次我进入这条路线时methods，我只会显示在 's 状态下共享数量超过 0 的容器。altAnims.js为了对此进行测试，我进行了硬编码BMW: 1，最终结果是animation停止工作并且宝马股票container也没有响应我的methods.

我不确定这是否是一个好习惯，也许将这些方法放在computed相反的位置，或者我所缺少的完全不同的东西。

抱歉这么长的问题，充满了代码块。我试图尽可能详细。

我想就这两个问题寻求帮助

PS - 我刚刚想到的一个想法是，这是否可以用于在这种情况下要加载templates的每个人。container我没有尝试过，但有可能吗？

提前干杯和感谢！

我目前有以下过渡块组件：

转换由this.step值 ( v-bind:key="step") 控制。

过渡看起来很棒this.step++，过渡向“正确”方向滑动：从左向右滑动。但是，this.step--过渡的时候是一样的。

我想知道，我将如何纠正此问题以从右向左滑动以获取this.step--方向？

部分树组件：

我正在构建一个基于 Vue.js 的 SPA，我想在其中的几个部分内容之间进行转换：

当我将active属性从 0 更改为 1 时，动态组件会发生变化并触发过渡。但是，切换到最后一个组件不会 - 它具有与之前相同的元素类型。组件的 props 不同并且被正确渲染，但是转换没有意识到发生了变化并且不会触发。

有什么想法可以解决这个问题 - 或者在过渡中组合模块的不同方法？

目前在 Vue 中使用转换时，我面临的问题是页面上的某些组件会立即消失，而其余组件会随着整个页面正常淡出。

这是我的过渡设置为最小的可重现示例，在这里工作Codepen 您可以看到当从Home路由切换到任何其他路由时，按钮会立即消失，而视图的其余部分会根据使用 css 设置的淡入淡出属性（和 vue 过渡）消失.

我已经阅读了 vue 转换文档，并且非常清楚如何将它们应用于所需的元素。但是当一个新的孩子（绿色）被添加/删除到一个弹性列时，如何使父容器（灰色）的高度变化平滑？我试图从 0 开始为新孩子的最大高度设置动画，但没有工作。这是我的情况：

小提琴：链接

代码：

HTML

JS

CSS

谢谢你的时间，

H25E

我在使用 vue js 进行转换时遇到问题。在 chrome 中它有点工作，但很奇怪，在 microsoft edge 中它根本不显示。我不知道如何解释，所以我会在我的代码中添加一个 jsfiddle 链接，这样你就可以明白我的意思了。链接：我的代码

在一个 Vue 组件中（我在 Drupal 8 项目的树枝模板中注册）我有一个

模态关闭时的以下 CSS 样式：

当我打开模态时，过渡工作正常。但是当我关闭模式时，我的样式不起作用？