问题标签 [svelte-transition]

该错误包含在单击某些路由器链接时在任何路由上呈现的重复组件中。这并不是每次都发生，因此非常重要，要小心 Svelte 动画和 Sapper 路线。

所以不知道如何很好地解释这一点，但基本上，当前正在转换的元素使用svelte/transition应该剪辑它的重叠元素。请参阅下面的图片

没有剪辑元素：

使用剪辑元素（无过渡）：

使用剪辑元素（过渡期间）：

这是过渡元素的代码：

剪辑元素的代码（一个抽屉）：

我正在使用 Tailwindcss 来处理样式和一些动画。

我目前正在尝试制作这样的东西： https ://www.youtube.com/watch?v=IF6k0uZuypA

但问题是他成功了，react但我想成功svelte。

我知道我可以使用苗条的过渡，我也尝试过，但是我不能用苗条的过渡来做到这一点，所以，有没有什么包可以用作react-transition-group苗条的替代品？

或者如果有人能做到，请告诉我，

提前致谢。

如何使用 __layout 中的过渡来加载带有动画的页面？
__layout.svelte：

Animate.svelte：

在此示例中，过渡效果仅适用于一次并显示动画。但我想在每次页面更改时显示转换！有没有改进这个应用程序的解决方案？

我有一个要隐藏/显示的输入字段，并使用淡入淡出和幻灯片过渡。我想出了两个例子，但都有各自的缺点，我想知道是否有更优雅的解决方案。

我只需要回答这两个问题之一，因为它们都可以解决我的问题。

问题 1：有没有办法为一个转换指令触发多个转换？

问题 2：如何在if 语句将元素放入 DOM后添加一个将触发普通 css-transition 的类？

示例 1

Svelte 不允许在同一个元素上进行两个过渡。所以一种解决方案是嵌套两个元素，如下所示。有没有一种方法可以同时使用 fade 和 slide 编写自定义过渡transition:myMultiTransition？

示例 2

在我的另一个解决方案中，我只是使用普通的 css 转换来切换一个活动类。这里的问题是<input>-field 永远不会离开 DOM。它的高度为 0px，但将其留在那里似乎是错误的。

如何使用 an 成功显示输入字段，{#if active === true}然后添加一个触发过渡效果的类？Svelte 似乎添加了应该在元素进入 DOM 之前触发转换的活动类。

我尝试以各种组合使用await tick(), onMount，beforeUpdate但没有运气。

当使用 setTimeout 添加具有延迟的类时，它可以工作 - 但我不喜欢这种解决方案，因为如果时间不准确，它可能会失败，而且我不希望在过渡开始之前有延迟。

REPL

https://svelte.dev/repl/89cb7d26d9484d0193b4bc6bf59518ef?version=3.38.3

我有一个像这样构建的组件

注意我有一个过渡和一个动画。过渡有效，但是如果翻转动画在那里，则输出过渡不起作用：/有没有办法正确地做到这一点，以便过渡和动画都有效？提前致谢

我正在使用 Svelte 和 flexbox 从容器中添加和删除元素，同时动态调整容器内永久元素的大小以始终占用剩余空间。

我想用苗条的“fly”添加和删除元素过渡进出。

这就是问题所在：永久元素会笨拙地立即跳转到它们的新大小，而不是与进入/退出元素一起平滑地制作动画。如何使永久元素在调整大小时具有动画效果？

我知道这可以通过动画“翻转”来完成，但这仅允许在 #each 块内。我希望使用#if 块来控制元素的进入和退出。

我有一个带有示例的 repl，但我也会在下面显示代码。

JS

HTML

CSS

我正在使用 svelte-spa-router 开发一个带有全页导航的 Svelte UI。我面临的情况是，UX 设计师定义了页面“每个转换”而不是每个页面之间的转换，这意味着它应该在 Svelte (AFAIK) 中。

例如，在这个 UX 页面 B1 输出过渡中：

• 返回首页 A 时立即消失；
• 前往 C1 时向左滑动；
• 去B2时溶解。

UX 实际上是有意义的，因为 B1/B2、C1/C2 是相似的，但从不同的角度处理相同的主题。

Svelte 过渡效果很好，但每个组件都定义了一个in过渡和一个out过渡。

我尝试利用过渡属性可以是对象和反应性的事实。

但我不知道如何改变过渡效果（也许是自定义过渡功能？）。此外，这个解决方案看起来非常复杂、耗时，并且在更复杂的用户体验中真的可能变成一团意大利面。

此外，在 svelte-spa-router 中，我没有找到一种方法来知道我来自哪里（即 prevision location）来相应地管理转换。

有什么想法吗 ？

我有一个元素显示来自商店的数组中的文本。它仅显示“当前索引”中的文本。我可以单击一个按钮来更改“当前索引”，并且显示的文本将相应更改。是否可以使用 Svelte 的过渡来淡出旧文本并淡入新文本？

我正在尝试为这个小部件列表设置动画。当然我不能只是animate:flip一个组件，Svelte 需要一个 DOM 元素。

我通常会用一个简单的容器 div 来解决它：

但是，当我在 . 周围使用 CSS Grid 时#each，我需要 Widget 作为直接子级。我不能把它包在任何东西里。我该如何解决这个问题？有什么方法可以传递animate:flip给 Widget 组件并在那里处理它？

这是我想要实现的 REPL。当每一行（包含三个单元格）都是一个组件时，我无法获得相同的行为。