问题标签 [vue-transitions]

我有两个 div 在使用 transition-group 之间进行转换，它应该可以正常工作 - 但是，div 转换下方的内容是“跳跃”的，具体取决于 div 的高度。我想要它阻止跳跃，而是以某种方式动画，所以在元素之间切换时我得到了一个很好的平滑过渡，而没有它“推”到“跳跃”的内容..

希望这是有道理的:)

我在这里设置了代码沙箱的示例：https ://codesandbox.io/s/reverent-stallman-8ixhp?file=/src/components/HelloWorld.vue

模板如下所示：

动画看起来：

问题是在元素消失时过渡可以正常工作，但在出现时根本不工作。我正在使用 Vue3

cssy

我创建了这个codepen，它是一个简单的翻转卡，它在 codepen 中运行良好，但是当我在使用 cli 创建的 vue 项目中添加这个项目时，一切正常；单击卡片后，它会显示卡片的背面，但不会应用该过渡，因此用户可以直观地看到它正在旋转。它旋转得非常快，听起来过渡没有效果。

这是模板代码

和脚本代码

和CSS代码：

谁能帮助为什么在 vue cli 项目中过渡如此之快或可能不适用？先感谢您

我正在学习过渡如何与 vue 一起工作。我有一个价格估算，当点击每个选项卡时，它会显示每件商品的估算价格。我希望当项目出现时，有一个向下滑动的效果。我试图找出方法，并通过Enter / Leave & List Transitions找到了方法。而且我也尝试过，但是效果还是不行。谁能帮我解决这个问题？

我在 Codesandbox 中的完整代码 => https://codesandbox.io/s/suspicious-almeida-rjyy9

PriceEstimation.vue

CSS

我有一个侧边栏组件，它利用过渡元素在侧边栏隐藏和显示时将其滑入和滑出。关闭时它会滑出，但只要打开它，它就会弹出。

侧边栏.vue

然后我的 App.vue 只有一个按钮，用于切换设置为侧边栏上的 modelValue 道具的值，即<sidebar showSidebar ...>content</sidebar>

我正在尝试transition在 Vue 组件中应用一个非常简单的 div 。元素不依赖于状态或任何东西——它只需要在组件显示时从右侧滑入。出于某种原因，我设置的过渡不起作用。

该组件在我的页面上显示为：

在该组件中，我有：

在我的过渡 CSS 中，我有：

但是当显示这个组件时，该元素上没有滑动过渡。

任何人都可以就我做错了什么提供任何建议吗？

我在半透明背景上呈现了一个模态。两个元素都有一个v-if由相同的变量控制。

虽然enter过渡动画效果很好，但 `leave` 过渡动画被忽略了（它应该平滑地淡出，而是立即消失）。为什么？

密码笔

标记：

CSS：

在我的应用程序中，单击模式的关闭按钮使其随着淡入淡出动画消失，而向下滑动它使其随着滑动动画消失。这是通过<transition name>根据事件更改模式来完成的。

同样的事情似乎不适用于过渡组。我做错了什么，还是实际上不可能？

代码沙盒

模板：

脚本：

CSS：

我是 VueJS 的新手。我花了最后两个小时尝试为滑块设置动画，最后我找到了解决方案，但我不明白为什么我需要将图像设置在绝对位置才能使用transform: translate属性获得幻灯片效果。有人可以解释我为什么吗？这是工作代码：

SCSS：

HTML：

我有以下代码：

我想实现如下所示的幻灯片工作

上面的代码我的幻灯片从下面滑动详细信息，我希望灰色部分与图片中显示的描述一起滑动。我什至试图把过渡放在里面，如下所示：

但它会展开灰色按钮并在里面显示描述。我如何通过过渡或没有过渡来实现这一目标？