svelte - 骑自行车穿过 Svelte 的商店时的过渡？

Question

我有一个元素显示来自商店的数组中的文本。它仅显示“当前索引”中的文本。我可以单击一个按钮来更改“当前索引”，并且显示的文本将相应更改。是否可以使用 Svelte 的过渡来淡出旧文本并淡入新文本？

Answer 1

您可以在值更改时使用{#key}块来销毁和重新创建元素，这将允许您运行转换。

<script>
    import { fade } from 'svelte/transition'
    import { readable } from 'svelte/store'
    
    let text = readable(["aaaa", "bbbb", "cccc", "dddd", "eeee"])
    let currentIndex = 0;
    
    let displayedText;
    $: displayedText = $text[currentIndex % $text.length]
</script>

{#key displayedText}
    <h1 in:fade>{displayedText}</h1>
{/key}

<button on:click={() => {currentIndex++}}>
    Next
</button>

由于我们有一个新元素来替换旧元素，我们只需要运行过渡来防止一次有多个元素。

在 Svelte REPL 中试试这个：https ://svelte.dev/repl/01287c1714a44a2eb557d4a50f22ae2c?version=3.42.5