两个元素“跳跃”之间的平滑过渡

Question

我爱斯维尔特，但我坚持一些基本的东西（虽然仅仅是化妆品）。下面的代码应该在两个元素之间平稳过渡，但相反，它会“跳转”-显然在传入元素到达之前为其腾出了空间。

[问题类似于几年前Rich Harris指出的this one，但我看不到已实施了解决方案。 Svelte tutorial site上的所有示例仅转换一个元素。

这里是基本标记/代码：

{#if div1}
    <div 
      in:fly={{ x: 100, duration: 400, delay: 400 }}
      out:fly={{ x: 100, duration: 400 }}>Div 1</div>
{:else}
    <div 
      in:fly={{ x: 100, duration: 400, delay: 400 }}
      out:fly={{ x: 100, duration: 400 }}>Div 2</div>
{/if}

<button on:click={()=>{ div1 = !div1}}>Switch</button>

Vue中的等效工作原理是：

<transition name="fly" mode="out-in">
    <div v-if="div1">Div 1</div>
    <div v-else>Div 2</div>
</transition>

这里是Code Sandbox example。您可以看到该按钮向下跳转以为新元素腾出空间。我添加了一个“ in”转换延迟，该延迟等于持续时间400（我知道这是默认值，但是为了清楚起见，我想明确设置它）。延迟应允许第一个元素在过渡下一个元素之前过渡出来，如第一个链接中所述（哈里斯称为“延迟的hacky使用”），建议使用here。

我还尝试过显式设置要超出位置的元素：absolute，这样它就不会占用空间。 Here is a (still not working properly) example。看起来有些不雅，即使它正在工作。出于某种原因，过渡覆盖了设置位置的类：absolute。

非常感谢您的帮助！

更新：我得到了预期的效果with this code。我在这里所做的是复制并修改Svelte的飞行过渡，使其带有附加参数“位置”，可以将其设置为“绝对”或“相对”或您想要的任何参数。对CSS进行一些调整，以确保没有奇怪的副作用（将容器设置为position：relative，并将每个元素的宽度设置为100％，以确保它们不会更改大小）。这可行，但是我仍然认为应该在不修改Svelte过渡的情况下减少劳动密集型方法。

Answer 1

我也是从Vue过来的，外出是Svelte想念的一件事。 Rich Harris甚至在Svelte 3之前就承认了它，但据我所知从未真正实施过修复。