Svelte：响应式数据更改的过渡

Posted 2023-02-19

【中文标题】Svelte：响应式数据更改的过渡

【英文标题】：Svelte: transition on reactive data change

【发布时间】：2020-10-18 22:05:57

【问题描述】：

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

<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>node 没有从 DOM 中删除（我猜）。那么，当数字发生变化时，让数字淡入淡出的最佳方法是什么？

【参考方案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

【讨论】：

确实有效，谢谢！我离开这个问题似乎有点老套，也许有一种更惯用的方法来做到这一点。如果不是，我会在几天内接受 ?

已接受，目前似乎找不到更好的方法。谢谢 ！ ;)

现在有一个 #key 指令。我已经更新了我的答案

哦，那真是太好了！谢谢，