问题标签 [vuejs-transition]

我在页面加载时添加动态子组件。当我们刷新页面时，在父级的 OnCreated 中添加子路由不会使页面工作。

因此，我正在解析页面模板（因为我在页面加载时知道它们）。

我现在正在寻找一种方法来了解与 href 匹配的路线。Vue-js 使用 path-to-regexp，我的问题很简单。

我想知道匹配的组件

我需要这个，以便我可以从路径中删除，然后将子组件动态添加到父组件。

假设我有一个正常的过渡，效果很好（遵循 vue 文档）。但我想在那个里面有另一个过渡。

例如，一个元素滑入，但其中的文本同时淡入？

我无法让内部孩子过渡到动画。不会被解雇吧？我试过“出现”也认为节点是新的。

几乎没有这方面的信息。

过渡效果

I need to be able to animate drag and drop in my vertical list. I used vuedraggable, wrapped my list in a transition-group and it all worked sweet. Until I fetch new data from the server. Now because of the introduction of transition-group for a split second the old data and the new data live together in the DOM causing the expansion of the list and pushing subsequent div down and back up. This is kind of expected per the docs:

the DOM operations for insertion and/or removal will be executed immediately on next frame (Note: this is a browser animation frame, different from Vue’s concept of nextTick).

Regardless of being able to drag and drop the element, if we were to fade in/fade out the new/old elements they will co-habitate for the time of the animation, which is not great as seen in this pen

Anyway to fade out, change the data, then fade in the new one, while maintaining the height of the list?

Note that without fade the problem is still obvious: Pen of my issue: click the switch data button to see the issue.

我在 Vue 应用程序中有一个博客文章的“网格”，需要在点击时进行动画处理，以作为单个文章视图扩展到全屏。它需要从“缩略图”或“预览”在扩展到全屏时在网格中的相同位置增长，然后关闭回到它在网格中的位置。

（另一个意图是点击的每篇博客文章都将是它自己的路线，以便您可以从外部导航到它）

我在尝试实现这一点时遇到的事情：

我尝试使用相同的元素并将其动画化为：

...等扩展时，但您不能为position属性设置动画。

所以，我的帖子必须在过渡之前已经绝对定位，否则它只会跳跃而不是动画。但是，我真的不想绝对定位从 Vue 中的 v-for 循环自动生成的网格中的元素。

我见过一些解决方案，其中有网格，然后将完整的帖子隐藏在页面上，点击时不透明度会淡入，但该解决方案需要滚动偏移跟踪，以使其看起来像是从网格内的缩略图增长而来。

希望我已经很好地说明了这个问题，以便清楚我要完成的任务。如果有人有在 Vue 或 React 中制作类似动画的经验，那将会很有帮助。谢谢！

编辑：需要明确的是，我已经处理了 Vue 应用程序的状态部分，所以当我点击我的帖子（只是不是正确的）时，我目前能够让动画发生，主要问题更可能是 CSS VueJS框架内的问题。

是否可以为 1 个元素应用 2 个转换名称？我有 3 个 li 元素，我希望它们都有相同的离开，但只有最上面的元素有一定的入口。例如，我希望他们所有人都有 mizi-leave，但只有最上面的一个有 pizi-enter。我被困在这个问题上，找不到任何例子。如果不可能，还有其他方法可以实现我想要的吗？

我最后一次尝试是：

idx 作为道具传递，顶部 li 的 idx 为 0。

我想在Vuejs中创建输入表单对话框。

有什么方法可以使用twitter bootstrap创建引导模式对话框？

我找到了一种方法（见下文）来实现它，但需要自定义 CSS 并且我无法选择引导 CSS。 例子

我不能使用Vuetify或 vue-bootstrap JS。

我有一个包含三个步骤的表格。并且每一步都应该在点击猎物/下一步时从一侧过渡到另一侧。问题是，在方向改变后没有正确应用过渡。有谁知道为什么 vue 在方向改变后没有向显示的元素添加正确的类？我一直在想为什么找不到解决方案。

这是一支笔：
https ://codepen.io/cjfradley/pen/YgvJxe

过渡块如下所示：

并且转换的名称会根据单击“上一个”或“下一个”两个按钮中的哪一个而更改。我的印象是，这将更改所有转换的转换名称。但不知何故，这个名字落后了一步。

谢谢你的帮助

克里斯

所以我用 vue.js 建立了一个网站。它部署在 CloudFront 分配后面的 AWS s3 存储桶上。最近我发现有些用户看到的是 2 周前的网站版本。这是一个大问题，因为我每天都会更新几次网站。

我已将 CloudFront TTL 设置为 1 分钟，以尝试避免更长的缓存，但这并没有解决问题。我尝试以以下方式实现服务，但抛出了许多异常并且不起作用。

我也尝试过完全禁用缓存，但没有奏效：

我希望能够在网站上呈现全新的内容，而不是让它缓存数周......

我正在尝试transition-group使用我的布局。它主要工作，除了删除带有滚动条的长列表中的最后一项。当我删除最后一个项目时，它占用的空间不会优雅地缩小，它会等到转换完成然后突然崩溃。我正试图让它流畅地制作动画。

我在这里设置了一个 JSFiddle ，它重现了同样的问题。我发现如果我将布局边距增加到<v-layout ma-5>例如，问题就会消失。但这对我来说不是一个解决方案，因为无论是否存在保证金，我都需要它来工作。

我有一个基于 vuejs 官方文档中提供的示例的待办事项列表。

示例：https ://jsfiddle.net/87Lfbzng/

这样做的问题是项目被立即删除/添加，没有动画。如果我transition按照官方文档实现标签生效。VueJS 转换

我试过把转换标签放在里面ul，但也没有用。

我目前的尝试：https ://jsfiddle.net/87Lfbzng/

CSS

标记