Svelte：反应性数据变化的过渡

Question

当反应变量发生变化时触发动画的最佳方法是什么？\n我想做这样的事情：\xc2\xa0

\n

<script>\n    import { fade } from \'svelte/transition\'\n    let count = 0;\n    const handleClick = () => count +=1\n</script>\n\n<button on:click={handleClick} transition:slide>\n    Click me\n</button>\n<p> You cliked <strong transition:fade>{count}</strong> times</p>\n

\n

这不起作用，因为<strong>节点没有从 DOM 中删除（我猜）。那么当数字变化时让数字淡入和淡出的最佳方法是什么？

\n

Answer 1

您现在可以 (v3.28) 使用该{#key <key}指令：

<script>
    import { fade } from 'svelte/transition'
    let count = 0;
    const handleClick = () => count +=1
</script>

<button on:click={handleClick}>
    Click me
</button>
<p> You cliked 
    {#key count}
      <strong in:fade>{count}</strong> 
    {/key}
    times</p>

旧答案

尝试这个 ：

<script>
    import { fade } from 'svelte/transition'
    let count = 0;
    const handleClick = () => count +=1
</script>

<button on:click={handleClick}>
    Click me
</button>
<p> You cliked 
    {#each [count] as c (c)}
    <strong in:fade>{c}</strong> 
    {/each}
    times</p>

REPL