Question

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

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

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

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

Answer 1

尝试一下：

<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

苗条：反应性数据更改时的过渡

1 个答案: