svelte - 过渡期间的苗条元素没有剪裁

Question

所以不知道如何很好地解释这一点，但基本上，当前正在转换的元素使用svelte/transition应该剪辑它的重叠元素。请参阅下面的图片

没有剪辑元素：

使用剪辑元素（无过渡）：

使用剪辑元素（过渡期间）：

这是过渡元素的代码：

<script lang="ts">
    import { onDestroy, onMount } from 'svelte';
    import { fade } from 'svelte/transition';

    let interval: NodeJS.Timeout;
    let currentIndex = 0;
    const techs = ['Flutter', 'Dart', 'Svelte', 'React', 'JavaScript', 'Typescript'];

    onMount(() => {
        interval = setInterval(() => {
            if (currentIndex === techs.length - 1) {
                currentIndex = 0;
            } else {
                currentIndex++;
            }
        }, 2000);
    });

    onDestroy(() => clearInterval(interval));
</script>

{#key techs[currentIndex]}
    <span in:fade={{ duration: 500 }}>
        {techs[currentIndex]}
    </span>
{/key}

剪辑元素的代码（一个抽屉）：

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

    let open = false;
    const toggle = () => (open = !open);
</script>

{#if open}
    <div
        class="fixed top-0 right-0 left-0 h-screen bg-black opacity-50 z-20"
        on:click={toggle}
        transition:fade={{ duration: 200 }}
    />
{/if}

<aside
    class="{ open ? 'w-60' : 'w-0' } h-screen fixed top-0 right-0 bg-white z-50 transform transition-all ease-in-out overflow-hidden duration-300 {open
        ? 'translate-x-0'
        : 'translate-x-full'}"
/>

<span class="inline md:hidden" on:click={toggle}>
    <i class="material-icons text-gray-600">menu_open</i>
</span>

我正在使用 Tailwindcss 来处理样式和一些动画。