Svelte 过渡：如何使传入的“输入”动态 Svelte 组件过渡等待传出的“输出”Svelte 组件完成答案

【问题标题】：Svelte Transitions: How to Make Incoming "in" Dynamic Svelte Component transition Wait for Outgoing "out" Svelte Component to FinishSvelte 过渡：如何使传入的“输入”动态 Svelte 组件过渡等待传出的“输出”Svelte 组件完成
【发布时间】：2020-05-12 03:20:39
【问题描述】：

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

与 transition: 不同，in: 和 out: 应用的转换不是双向的 - in 转换将继续与 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>

编辑：我应该添加一个复杂性——我正在通过 sapper 锚标记驱动组件遍历，这些锚标记负责组件的创建/销毁。换句话说：

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

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

我不确定这是否会有所不同？

【问题讨论】：

标签： javascript svelte sapper svelte-3

【解决方案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>

【讨论】：

我遇到了同样的 UI 模式问题，如果 div 在它的细长 if 子句中阻止了每个，我有一堆问题，例如{#if currentlyOpenTab == 'profile_settings' } content... {:else if currentlyOpenTag == 'team' } team content etc. {/if}。起初，我尝试在 div 块上使用绝对定位，这对我的 UI 布局的其余部分带来了很多副作用，所以我还决定采用非优雅的解决方法，即使用delay，例如<div in:fly|local="{{ x: -1000, duration: 500, delay: 400 }}" out:fly="{{ x: 1000, duration: 400 }}">。这种模式没有内置的吗？

【解决方案2】：

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

例子：

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

【讨论】：