问题标签 [vuejs-transition]
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.
css - 如何为每个组件自定义过渡？
我有 3 个组件，我想在它们进入/离开时显示过渡效果。
当您按下相关按钮时，会出现 1 个“主要”组件和另外 2 个组件。我当前的示例代码在这里：https ://jsfiddle.net/5aq1k05L/
CSS：
我正在尝试做的事情：
当我单击“componentA”按钮时，我希望该组件从左侧滑动，而“mainComponent”在过渡期间仍然在背景中可见（不像现在那样从元素中剥离）。
“componentB”也是一样，除了它会从右边滑动，点击返回时会回到右边。
css - vuejs关于删除列表项的动画问题
我正在尝试删除带有一些动画的列表项，问题是如果删除的项目是最后一个它可以正常工作，但是如果我删除除最后一个动画之外的某些项目无法正常工作，请参见此处的小提琴：https： //jsfiddle.net/49gptnad/1003/
js代码：
html
css
vue.js - 用一个转换多个子元素包装
我想在一个父v-if状态更改中设置多个转换（在单独的子元素上）。
例如，当我显示模态时，我希望背景模糊fadeIn（使用不透明度）和模态内容slideIn（使用过渡或动画）。我目前的情况如下，当我使用过渡时，背景模糊元素（.modal）与内容（.modal__content）一起过渡：
javascript - vuetify 的 Vuejs 2.4 转换组调整大小问题
请首先我必须提到我在前端不是很好，但我花了很多时间试图解决这个问题，所以请不要对我太苛刻。
这是我的问题，我使用 Vuejs 和 vuetify 来创建列表应用程序的前端。
我遇到问题的组件应该使用下图中的左右箭头水平列出项目。
这是组件的代码
转换代码正常工作，除了在应用转换时它会更新呈现的元素的大小
这是未应用转换的列表图片（评论标签）
这是应用过渡后的同一张图片
如您所见，右侧有一个偏移量，并且图像的大小被缩小了，我不知道如何修复它。
html - 将 vuejs 转换组应用于 Bootstrap 网格
我正在尝试将 vuejs 转换应用于 Bootstrap 网格，但它完全搞砸了网格系统，因为转换组修改了 DOM 并在row和标签之间添加了一个新col-md-6标签。例子：
当它被渲染时，它被修改为：
新span标签与网格系统混淆，因为.col-md-6不再是.row.
任何人都知道仍然使用 Bootstrap 网格的解决方法吗？
css - VueJS 中带有 CSS 过渡的简单淡入淡出入口
它看起来很简单，但我可以让它工作。当一个新元素添加到我的列表中时，我希望其他元素移动以便为新元素留出空间，然后新元素必须以淡入淡出过渡出现。
我无法制作这个简单的动画。我可以让其他元素移动，但我的新元素没有任何淡入淡出过渡。它只是出现！建筑信息模型。
这是一个代码笔： https ://codepen.io/MuyBien/pen/OEqNEQ
vue.js - Vuejs转换无法使用计算属性
我正在创建一个简单的库存系统，该系统将为项目提供各种类别，以及显示所有项目的选项。
从“所有”类别转到“一般”类别将删除不必要的项目，但会在很长一段时间内留下间隙，并且在间隙滑动到位后没有项目的动画。
我正在使用 Vuejs 和 vue2-animate 执行此操作。
vue.js - Vuejs 列表重新排序不会触发转换
我已经做了一些 vuejs 快一年了，但我从来没有真正让动画和过渡工作，我似乎很不清楚这一切应该如何工作，今天我决定尝试并最终理解它们，但我又一次卡住了，过渡根本行不通，我不明白我做错了什么。这是我的代码：
的HTML
JS
CSS
https://jsfiddle.net/eywraw8t/459088/
当我在连续对齐的卡片列表中重新排序卡片时，我试图触发动画。要更改卡片的位置，只需单击它。重新排序有效，但未完成转换。
我使用了这个文档 https://vuejs.org/v2/guide/transitions.html#List-Move-Transitions 并且看过一些相当简单的教程，但我一定遗漏了一些东西。有人可以检查代码并告诉我它是什么吗？
谢谢
javascript - 嵌套过渡期间NodeJS错误渲染
我正在构建一个对话框组件，该组件嵌入了一个覆盖屏幕其余部分的覆盖层，从而阻止了任何操作。我希望对话框本身以滑动效果出现，而叠加淡入，（消失时相反）。
不知何故，关闭对话框时效果很好，但是打开时，在“过渡”时，叠加层无法正确渲染，高度为 0 像素。
JsFiddle（1秒后弹出对话框，点击覆盖关闭）
我尝试使用以下代码强制转换仅适用于不透明度，但没有结果..
知道这里有什么问题吗？
sortablejs - “错误：不支持组件内的转换组”使用 Element UI 和 Vue Draggable
我正在使用 element ui 的collapse和vuedraggable。我正在尝试将 vue 转换组实现到可折叠项目。vuedraggable 文档说你可以简单地这样做：
就我而言，我将可拖动的项目放在“el-menu”组件中。这就是我收到错误的原因：
“错误：不支持组件内部的转换组”
这是我到目前为止得到的：