问题标签 [vue-transitions]

正如标题所暗示的那样简单，我不确定为什么转换无法在两个 svg 之间切换。

我在这里想念什么？我将 svg 包装在 div 中，但这根本没有帮助。

任何建议将不胜感激。

干杯!

代码笔： https ://codepen.io/LovelyAndy/pen/MWmyzmm

html

CSS

我在导航栏的一行中有 5 个 svg。单击图标时，它会转换为更大的版本，但是当发生这种变化时，所有兄弟姐妹都会垂直移动。

有没有办法阻止这种情况发生？一种让周围的 flex 元素保持其精确的垂直和水平中毒的方法？

代码沙盒： https ://codesandbox.io/s/bubble-bar-v3-o3272 ?file=/src/components/BubbleBar.vue

气泡条.vue

I am working with a fairly simple icon animation in a app built in VueJS. I am using a Vue transition for the fade effect on the background elements, but wanted a simple shift up animation on the icon itself.

I have it working as I'd like on the upward shift, but is there anyway to reverse the transition when the _active class is removed?

All I'm looking to do is have the icon shift up and the background fade in on click and then shift back down to it's og position and background fade out.

I have a Codesandbox ready and the code below it

Codesandbox: https://codesandbox.io/s/animated-icon-f96df?file=/src/components/HelloWorld.vue:0-8880

我试图向这样的插槽添加过渡

添加了这样的 CSS 类

父模板如下所示

过渡不起作用。我正在犯什么错误。

我每 5 秒有一个表格和一个来自 websocket 的数据。我使用 unshift() 方法将此数据作为一行添加到表中。现在我应该在 websocket 数据添加到表时添加转换。这是 websocket 数据添加到表中的代码：

这些是我使用转换的代码：

问题是数据添加到表的顶部，但转换是从底部发生的。我该如何解决这个问题？

我的模态有效，但没有一个过渡 css（如下所示）有效。所有样式都会立即消失并重新出现。这与在另一个组件中使用它有关吗？

我还注意到，当使用 v-show 时，我的模态总是显示。我必须将其更改为 v-if 才能使其按预期工作。

搜索模式.vue：

TopNav.vue：

我想在子路由之间创建一个非常简单的 nuxt 过渡。

结构是：

索引.vue：

子组件：

一.vue：

二.vue

三.vue

问题是：

什么都没有发生！当我改变路线时，它们的变化方式就像没有过渡一样。

我做了什么：

我试图完全按照 nuxt 文档所说的去做。

我也搜索了很多关于它的内容，但不幸的是，没有一个类似的问题得到回答。

问题1

问题2

问题3

我只是通过vue 转换工作，我遇到了一件我不明白的事情。

我想显示一个不断洗牌的列表。为此，我编写了函数 shuffle()，它每 2000 毫秒调用一次。在函数结束时，我将打乱后的新数组分配给变量this.items。但是，DOM 中的列表并没有被打乱！如果我this.items事先将其重新初始化为空数组，则列表将被打乱！

您可以在下面显示的 shuffle() 函数中看到这一点。如果我删除带有 的行this.items = []，则随机播放不起作用。

如果有人可以向我解释这一点，我会很高兴。

那是代码的html部分：

这就是js部分：

路由.js

应用程序.vue

当我访问 /home 并单击“注册”时 -它可以工作。但是一旦我尝试回到主页，它显然正在加载组件，但它是空白的。

从那时起，在路由之间切换显然会切换组件，但在我刷新任何页面之前，一切都保持空白 - 然后它会显示出来。

当我从中删除转换时，router-view它开始工作。

随着过渡，唯一有效的开关是从 Home 到 Register。然后任何开关只会将页面变为空白。

我已经尝试过$router.push, router-link, $router.back()- 所有相同的结果。

编辑：我发现不仅删除整个过渡修复它，而且从更改out-in为in-out. 我的设计看起来不太好，但它显示的组件很好。

我正在尝试复制 Material Design 的涟漪效应，因为我正在开发的当前应用程序将摆脱 Quasar；所以我正在从头开始构建所有元素。

这个效果：

我看过一些纯 CSS 和 JS 的视频，我试图将其转换为我的项目，但我在某个地方被赶上了。我有正确的悬停效果和鼠标位置记录，但是涟漪效应没有触发，我不知道为什么。

任何帮助将不胜感激！干杯!

代码沙盒代码

CButton.vue

应用程序.vue