Svelte 转换：如何使传入“in”动态 Svelte 组件转换等待传出“out”Svelte 组件完成

Question

本质上，我正在开发一个幻灯片项目，其中每个“幻灯片”都是使用 <svelte:component this={currentSelection.component} />. 每张幻灯片都需要逐个组件地自定义进出转换。然而，正如 svelte 文档中所述，我希望下一张幻灯片在当前幻灯片完成转换时“等待”：

\n\n

\n

与transition:不同，使用in:和out:应用的转换不是双向的\xe2\x80\x94，如果在转换时块被淘汰，则in转换将继续与out转换一起“播放”，而不是反转正在处理。如果输出转换被中止，转换将从头开始重新开始。

\n

\n\n

是否有一种明智的方法可以使下一张幻灯片“等待”，直到当前幻灯片完成其结尾过渡？

\n\n

REPL的玩具示例

\n\n

为后代发布的玩具代码：

\n\n

//App.svelte\n<script>\n    import RedThing from \'./RedThing.svelte\';\n    import GreenThing from \'./GreenThing.svelte\';\n    import BlueThing from \'./BlueThing.svelte\';\n\n    const slides = [\n            RedThing,\n            BlueThing,\n            GreenThing\n    ];\n    let currentComponent = 0;\n    const prev = () => currentComponent--;\n    const next = () => currentComponent++;\n\n</script>\n\n<button on:click={prev}>Prev</button><button on:click={next}>Next</button>\n<div>\n    <svelte:component this={slides[currentComponent]}/>\n</div>\n\n

\n\n

//RedThing.svelte\n<script>\n    import { fly, slide } from \'svelte/transition\';\n</script>\n\n<style>\n    div { color: red; }\n</style>\n\n<div in:fly out:slide>red thing</div>\n\n

\n\n

//GreenThing.svelte\n<script>\n    import { fade, slide } from \'svelte/transition\';\n</script>\n\n<style>\n    div { color: green; }\n</style>\n\n<div in:slide out:fade>green thing</div>\n

\n\n

//BlueThing.svelte\n<script>\n    import { scale, fade } from \'svelte/transition\';\n\n\n</script>\n\n<style>\n    div { color: blue; }\n</style>\n\n<div in:scale out:fade>blue thing</div>\n

\n\n

编辑：我应该添加一个并发症\xc2\xa0\xe2\x80\x93\xc2\xa0我正在通过sapper锚标记驱动组件遍历，这些锚标记负责组件创建/销毁。换句话说：

\n\n

<a href={prev} id="previous-button">Previous</a>\n<a href={next} id="next-button">Next</a>\n\n<div>\n    <svelte:component this={slides[currentComponent]}/>\n</div>\n

\n\n

我不确定这是否有什么不同？

\n

Answer 1

我知道这个线程已经有几个月了，这里是一个简单的解决方案。我也遇到了这个问题。秘密是什么？延迟参数：

REPL​

// RedThing.svelte
<script>
    import { fly, slide } from 'svelte/transition';
</script>

<style>
    div { color: red; }
</style>

<div in:fly="{{delay: 300, duration: 300}}" out:slide="{{duration: 300}}">red thing</div>

// GreenThing.svelte
<script>
    import { fade, slide } from 'svelte/transition';
</script>

<style>
    div { color: green; }
</style>

<div in:slide="{{delay: 300, duration: 300}}" out:fade="{{duration: 300}}">green thing</div>

// BlueThing.svelte
<script>
    import { scale, fade } from 'svelte/transition';
</script>

<style>
    div { background-color: blue; }
</style>

<div in:scale="{{delay: 300, duration: 300}}" out:fade="{{duration: 300}}">blue thing</div>

Answer 2

position: absolute;通过添加到每个动态组件的容器，我找到了一个半可行的解决方案来解决我的问题。这是可行的，因为转换会将传入组件作为旧组件的同级组件附加到 dom，然后再销毁它。通过使位置绝对，输出和输入组件位于相同的位置。一些淡入淡出调整使它看起来不错。这不是一个理想的解决方案，但可能就足够了。

例子：

//RedThing.svelte
<script>
    import { fly, slide } from 'svelte/transition';
</script>

<style>
    div { color: red; }
</style>
<div style="position:absolute;" transition:fade={{duration: tweaky}}>
    <div in:fly out:slide >red thing</div>
</div>

//GreenThing.svelte
<script>
    import { fade, slide } from 'svelte/transition';
</script>

<style>
    div { color: green; }
</style>
<div style="position:absolute;" transition:fade={{duration: tweaky}}>
    <div in:slide out:fade >green thing</div>
</div>

受到此解决方案的启发/窃取，在页面之间创建 sapper 交叉淡入淡出： https://dev.to/buhrmi/svelte-component-transitions-5ie