如何使用 Svelte 为元素的内部变化设置动画？

Question

Svelte 中的过渡仅适用于进入或退出 DOM 的元素。

例如，当 div 最初添加到 DOM 时，这将应用淡入淡出：

<div in:fade>{message}</div>

我们如何在 message 更改时添加过渡？

由于 Svelte 不能在单个元素上设置键，我发现的唯一解决方案是使用单个元素数组在数组发生变化时触发 DOM 中的新元素，这似乎并不理想:

<script>
let messages = ['hello world'];

function updateMessages (message) {
    messages = [message];
}
</script>

{#each messages as message (message)}
    <div in:fade>{message}</div>
{/each}

Answer 1

你的 #each hack 确实是目前推荐的方法（我们将来可能会添加类似 key 指令的东西，但没有承诺）——我只想做一个改变，这是做 #each [x] as x 而不是单独维护一个数组：

<script>
let message = 'hello world';

function updateMessages (new_message) {
    message = new_message;
}
</script>

{#each [message] as message (message)}
    <div in:fade>{message}</div>
{/each}

Answer 2

从 Svelte 3.28 开始，有一个实现该功能的 {#key} - 请参阅 https://svelte.dev/docs#key

例如，这将导致运行每当值发生变化时它的转换。

{#key value}
    <div transition:fade>{value}</div>
{/key}

如何使用 Svelte 为元素的内部变化设置动画？

How to animate an element on an inner change with Svelte?

svelte