Svelte转换:如何使“动态Svelte组件转换”中的“传入”等待传出"out“Svelte组件完成

Question

本质上，我正在处理一个幻灯片项目，其中每个“幻灯片”都是使用<svelte:component this={currentSelection.component} />动态加载的。每一张幻灯片都需要基于组件逐个组件的自定义输入和输出转换。但是，我希望下一张幻灯片在当前幻灯片完成转换时“等待”，正如svelte文档中所述：

与transitions不同的是，与in: and out: are双向应用的转换--如果转换正在进行，则和in转换将继续与out transitions一起“播放”，而不是反转，如果转换正在进行中，则为。如果一个out转换被中止，转换将从头开始重新启动。

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

REPL玩具示例

供后人使用的玩具代码：

//App.svelte
<script>
    import RedThing from './RedThing.svelte';
    import GreenThing from './GreenThing.svelte';
    import BlueThing from './BlueThing.svelte';

    const slides = [
            RedThing,
            BlueThing,
            GreenThing
    ];
    let currentComponent = 0;
    const prev = () => currentComponent--;
    const next = () => currentComponent++;

</script>

<button on:click={prev}>Prev</button><button on:click={next}>Next</button>
<div>
    <svelte:component this={slides[currentComponent]}/>
</div>

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

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

<div in:fly out:slide>red thing</div>

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

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

<div in:slide out:fade>green thing</div>

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


</script>

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

<div in:scale out:fade>blue thing</div>

编辑:我应该添加一个复杂的修改--我正在通过皂角锚标记驱动组件遍历，这些标记负责组件的创建/破坏。换言之：

<a href={prev} id="previous-button">Previous</a>
<a href={next} id="next-button">Next</a>

<div>
    <svelte:component this={slides[currentComponent]}/>
</div>

我不确定这会不会有什么区别？

Answer 1

我知道这个线程是几个月前的，这里是一个简单的解决方案。我也有这方面的问题。秘密？延迟参数：

The 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>

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

Answer 3

这假定所有过渡的持续时间是一致的。每个幻灯片组件中与外部持续时间相匹配的介绍增加了延迟。如果您希望每个幻灯片转换的持续时间不同，则可能需要跟踪并匹配它们(可能在存储区中)。

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

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

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