问题标签 [svelte-transition]

我正在检查 Svelte，我发现了更多我所期望的开箱即用的东西。

让我有点惊讶的是，过渡和动画工具的数量，尤其是自定义过渡的工具，而且我无法从它们的语法中完全分辨出这些是编写 CSS 的函数，还是它们是操纵的函数直接使用类 CSS 语法的样式。

生成的动画是否只有 CSS？

我遇到了与 Sapper 的路由和 Svelte 的转换有关的问题。

我创建了一个只有 2 页的小型 Sapper 网站。在主页上，我得到了一个轮播组件。它的每张幻灯片都有一个in:fade={{duration: 2000}}和一个out:fade={{duration: 2000, delay: 1000}}。

当页面第一次加载时没有过渡，这是完美的。

当我导航到 /contacts 时，问题就出现了，在我开始看到联系人页面之前，我必须等待 3 秒的淡出。转换完成后，我可以看到该页面。

这种行为正常吗？我能以某种方式避免它吗？我最终只使用了 CSS 过渡，但我更喜欢使用 svelte-transition :)

我想在 Sapper 中实现一个简单的页面（路由）转换。例如，使用 Nuxt 可以轻松实现的目标。有谁知道如何用 Sapper 实现这一点？

我已经用 transition:fade 指令将我的页面内容包装到了一个 div 中。这行得通。然而，两页同时转换，这意味着当一页转换出另一页时，另一页已经转换了。如果有人指出我正确的方向，那就太好了。谢谢！

在 Svelte 中，我有一个组件用于在两个不同的列表中显示项目。当这些项目从一个列表移动到另一个列表时，它们会使用过渡来动画进出。

但是，我也有办法过滤屏幕上显示的内容。显示一组新项目将使用相同的组件，但具有不同的数据。在这种情况下，我不希望出现过渡动画。我认为添加local修饰符可以解决问题，但似乎 Svelte 并未将父元素删除到列表中，而是重用它并在现有列表 DOM 元素中添加新数据。

我试图重现我在下面的示例代码中看到的内容。

通缉行为：

1. 单击 TODO 会将 TODO 从一个列表切换到另一个列表。
2. 单击“切换类别”将切换列出哪些 TODO，而不会对<li>添加或删除的 TODO 进行动画处理。

实际行为：

1. 按预期发生。
2. 切换的待办事项与动画一起执行。

我怎样才能改变我的例子，以获得我想要的效果？

App.svelte：

Todos.svelte：

当反应变量发生变化时触发动画的最佳方式是什么？我想做这样的事情： 

这不起作用，因为<strong>节点没有从 DOM 中删除（我猜）。那么，当数字发生变化时，让数字淡入淡出的最佳方法是什么？

给定带有下拉菜单的有条件渲染的 div。为了计算它的位置（向上或向下打开），我需要获取它的高度和宽度。

当然，在过渡完成之前元素没有得到正确的尺寸。

所以问题是 - 我如何以编程方式关闭转换？或者如何在不显示元素的情况下获得元素的未来位置？

我正在开发一个小型 Svelte 应用程序，用于学习目的（我是 Svelte 新手）。

该应用程序在 Bootstrap 4 表中显示来自 randomuser.me API 的用户 JSON。

我有这个deleteUser()方法

我想添加一个类似于 jQueryslideUp()提供的向上动画。

在表格行上添加这个飞行过渡<tr transition:fly="{{y:-100, duration:200}}">并没有得到想要的结果（虽然我得到的效果很漂亮），因为它在这个REPL中是可见的。

我的目标是通过组件属性提供过渡速度，并为增长和收缩设置不同的值。到目前为止，我设法通过以编程方式更改组件样式来实现这一点。

这可以完成这项工作，但也许有更惯用/优雅的方式来做到这一点。

使用此示例链接到 Svelte REPL

我目前正在使用 Svelte 和 Sapper 开发一个网站。我正在使用 Svelte 过渡来为某些页面元素设置动画。每当我更改为新的页面路由时，过渡动画都会正确显示。但是当我第一次加载页面时，它们没有动画。

Svelte 如何处理页面加载时的动画？我是否需要使用 onMount() 才能让它们正常工作？

我正在尝试为标签设置动画。我想让它从顶部飞到当前位置，然后从当前位置飞到顶部。

我不太了解过渡和动画的工作原理。在这种情况下，即使 y 是 200，它也会在 x 轴上移动。

这是一个链接到 svelte repl