我有一个输入字段，我想隐藏/显示并通过淡入淡出和幻灯片过渡来实现。我提出了两个例子，但都有各自的缺点，我想知道是否有更优雅的解决方案。
我只需要回答两个问题之一，因为它们都可以解决我的问题。
问题 1：有没有办法为一个转换指令触发多个转换？
问题 2：如何添加一个类，在if 语句将元素放入 DOM后触发普通的 css-transition？
实施例1
Svelte 不允许在同一元素上进行两次转换。因此一种解决方案是嵌套两个元素，如下所示。有没有一种方法可以同时使用 fade 和 slip 来编写自定义过渡transition:myMultiTransition？
{#if active === true}
<span transition:fade>
<span transition:slide>
<input type="text" />
</span>
</span>
{/if}
实施例2
在我的另一个解决方案中，我只是使用普通的 css 转换来切换活动类。这里的问题是<input>-field 永远不会离开 DOM。它的高度是 0px，但把它留在那里似乎是错误的。
如何成功地显示输入字段，{#if active === true}然后添加一个触发过渡效果的类？Svelte 似乎添加了应该在元素进入 DOM 之前触发转换的 active-class。
我尝试过以各种组合使用await tick(), onMount,beforeUpdate但没有成功。
当使用 setTimeout 添加延迟的类时，它可以工作 - 但我不喜欢这个解决方案，因为如果时间不准确，它可能会失败，并且我不希望在转换开始之前有延迟。
<span class:{active}>
<input type="text" />
</span>
<style>
.active {
// Normal transition: opacity …我想在 Sapper 中实现一个简单的页面（路由）转换。例如，使用 Nuxt 很容易实现的东西。有谁知道如何使用 Sapper 实现这一点？
我已经使用 transition:fade 指令将我的页面内容包装到一个 div 中。这有效。然而，这两个页面同时转换，这意味着当一个页面转换出另一个页面时，另一个已经转换了。如果有人指出我正确的方向，那就太好了。谢谢！
当反应变量发生变化时触发动画的最佳方法是什么？\n我想做这样的事情：\xc2\xa0
\n<script>\n import { fade } from \'svelte/transition\'\n let count = 0;\n const handleClick = () => count +=1\n</script>\n\n<button on:click={handleClick} transition:slide>\n Click me\n</button>\n<p> You cliked <strong transition:fade>{count}</strong> times</p>\n这不起作用，因为<strong>节点没有从 DOM 中删除（我猜）。那么当数字变化时让数字淡入和淡出的最佳方法是什么？
我正在尝试为这个小部件列表添加动画。当然我不能只是animate:flip一个组件，Svelte 需要一个 DOM 元素。
<!-- invalid -->
{#each widgets as widget (widget.id)}
<Widget {...widget} animate:flip/>
{/each}
我通常会用一个简单的容器 div 来解决它：
<!-- does not apply to my situation -->
{#each widgets as widget (widget.id)}
<div animate:flip>
<Widget {...widget} />
</div>
{/each}
但是，由于我在 周围使用 CSS 网格#each，因此我需要 Widget 作为直接子级。我无法用任何东西包裹它。我该如何解决这个问题？有什么方法可以传递animate:flip到 Widget 组件并在那里处理它吗？
这是我想要实现的目标的 REPL。当每行（包含三个单元格）是一个组件时，我无法获得相同的行为。
在 Svelte 中，我有一个组件用于在两个不同的列表中显示项目。当这些项目从一个列表移动到另一个列表时，它们会使用过渡来动画进出。
但是，我也有一种方法可以过滤屏幕上显示的内容。显示一组新项目将使用相同的组件，但具有不同的数据。在这种情况下，我不希望发生过渡动画。我认为添加local修饰符可以解决问题，但 Svelte 似乎没有将父元素放到列表中，而是重用它并在现有列表 DOM 元素中添加新数据。
我试图重现我在下面的示例代码中看到的内容。
通缉行为：
<li>添加或删除的 TODO进行动画处理。实际行为：
我怎样才能改变我的例子，以获得我想要的效果？
App.svelte：
<script>
import Todos from './Todos.svelte';
let todos = [
{ id: 1, category: 'personal', name: 'Walk dog', done: false },
{ id: 2, category: 'personal', name: 'Take out trash', done: false },
{ id: 3, category: 'work', name: 'Make login page functional', done: false },
{ id: 4, category: 'work', name: 'Make login page elegant', done: false …我有一个与 Sapper 的路由和 Svelte 的转换相关的问题。
我创建了一个只有 2 个页面的小型 Sapper 网站。在主页上我有一个轮播组件。每张幻灯片都有一个in:fade={{duration: 2000}}和一个out:fade={{duration: 2000, delay: 1000}}。
当页面首次加载时，没有过渡，这是完美的。
当我导航到 /contacts 时，问题就出现了，在我开始看到“联系人”页面之前，我必须等待 3 秒的淡出。转换完成后我就可以看到该页面。
这种行为正常吗？我能以某种方式避免它吗？我最终只使用了 CSS 过渡，但我更喜欢使用 svelte-transition :)
我正在检查Svelte，并且发现了很多我所期望的东西。
令我惊讶的是，过渡和动画工具的数量特别是自定义过渡的工具，这让我有些惊讶，而从它们的语法中我无法完全看出它们是编写CSS的函数还是操纵CSS的函数。直接使用类似于CSS的语法样式。
生成的动画是否仅是CSS？
我目前正在使用 Svelte 和 Sapper 开发一个网站。我正在使用 Svelte 过渡来为某些页面元素设置动画。每当我更改到新的页面路由时，转换都会正确设置动画。但是当我第一次加载页面时，它们没有动画。
Svelte 如何处理页面加载时的动画？我是否需要使用 onMount() 才能让它们正常工作？