问题标签 [vue-transitions]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
365 浏览

vue.js - Vuejs 转换类不适用于 Vue 组件

我正在使用VueJs转换来制作组件appVacancies幻灯片。

用于过渡的Vue 特定 CSS是

created()生命周期钩子上,我只是setTimeout()用来将showVacancies布尔值设为true.

我也有一个类似配置的淡入淡出动画,但这是有效的。

我不知道我在这里做错了什么。请帮忙。

0 投票
1 回答
1099 浏览

vue.js - Vue - 计算过滤列表更改时触发动画

使用计算属性过滤的项目列表如何在{{ filteredRows.length }}每次过滤/更新列表时触发结果标记上的动画。

Javascript

这是一个工作示例 https://codepen.io/ben_jammin/pen/JqQYaM?editors=1010

0 投票
2 回答
2087 浏览

javascript - Vue 过渡组使用进入/离开而不是移动

使用vue transition-groups,有没有办法触发离开 + 进入转换而不是移动元素的移动转换?

它应该离开,然后进入新的位置。移动转换似乎只适用于转换。

操场:https ://codepen.io/anon/pen/WqJEmV

HTML:

JS:

CSS:

0 投票
1 回答
999 浏览

css - 过渡完成后Vue过渡元素不显示

当用户单击顶部栏时,我正在尝试将元素设置为完整的浏览器高度。动画有效,但是一旦(进入)动画完成,容器就会跳回零高度,而它应该一直保持到用户单击关闭按钮。

动画完成后如何使容器保持 100vh?

我尝试添加高度:100vh;在元素上,但是通过这样做,过渡动画停止工作。(通过删除高度,动画有效但元素消失)

不确定这是否重要,但我将 v-if 更改为 v-show 并在容器上添加了一个键,但这似乎没有什么区别。

这是我的代码的链接。查看动画。

0 投票
2 回答
71 浏览

javascript - 如何纠正:“不要使用钥匙,不要使用钥匙,例如,不使用钥匙。”?

下午好,我正在尝试使用转换组为日历中的交换动画设置动画并弹出这样的错误,我知道它说“不要使用 v-for 循环索引作为键”,但是当我删除它们会导致另一个错误,即转换组中的所有项目都必须具有自己的唯一键。另外,也许您知道一些有用的导师或任何可能对我理解过渡有用的文章,请提供链接。

日历和错误的屏幕截图

0 投票
0 回答
960 浏览

javascript - 如何使用 Vue 无限地为 CSS 设置动画

寻找一种无限运行 Vue 动画的方法。初始动画有效,但不会无限运行。

这适用于纯 css,但每次组件更新时都会重新启动。

这不会在每次组件更新时重新启动,而只会触发一次。如何无限地为 vue 过渡设置动画?

0 投票
1 回答
327 浏览

vue.js - Vue.js 中 v-if/else 高度的平滑过渡

我有一个加载数据然后显示它的组件。用户可以修改触发新数据加载的模块。在加载数据时,会显示加载状态。我想使用 animate.css 在这些状态之间平滑过渡。我有它大致工作,但仍然有一些跳跃。如何让元素的高度在状态变化时平滑缩放?

JS:

HTML:

https://jsfiddle.net/2ud5s1ne/11/

0 投票
1 回答
2552 浏览

vue.js - 如何将 vuedraggable 与过渡 groip 和标头插槽一起使用

我有过渡组制作翻转动画的工作代码

这与 vuedraggable 文档中的示例片段非常相似。当我添加标题插槽时,它停止工作

如果删除过渡组并只保留标题,它会再次起作用(显示标题,显然现在有动画)

如何获得标题+动画拖放?

0 投票
1 回答
43 浏览

vuejs2 - 为什么用 `v-if` 切换元素的这种简单转换不起作用?

如果我尝试使用两个<div>'s 的一个非常简单的示例,使用 一次只显示其中一个v-if,则out-in过渡不会在它们之间消失。

还有我的动画CSS代码:

JSFiddle 位于此处:https ://jsfiddle.net/3ckto1am/1/

0 投票
3 回答
636 浏览

vue.js - 如何仅在页面加载时禁用转换组?

我有一个呈现 div 的转换组,其中有一个具有 v-for 属性的组件,它呈现多个项目。然后我有一个按钮,可以将新项目添加到数组的开头。这种过渡效果很好。

我唯一不喜欢的是整个列表在页面加载时加载转换,我只想在页面加载时禁用它。我搜索了 Stack 和 Google,但找不到方法。有没有办法做到这一点,以便在按钮单击时仍然可以进行转换,但在页面加载时被禁用?