骑自行车穿过 Svelte 的商店时的过渡？答案

【问题标题】：Transition when cycling through store in Svelte?骑自行车穿过 Svelte 的商店时的过渡？
【发布时间】：2021-11-10 04:15:10
【问题描述】：

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

【问题讨论】：

标签： svelte svelte-store svelte-transition

【解决方案1】：

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

<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

【讨论】：