如何使用 Svelte 对内部变化的元素进行动画处理？答案

【问题标题】：How to animate an element on an inner change with Svelte?如何使用 Svelte 对内部变化的元素进行动画处理？
【发布时间】：2020-05-15 18:37:00
【问题描述】：

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}

【问题讨论】：

标签： svelte

【解决方案1】：

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

例如，这将导致每当值更改时运行其转换。

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

【讨论】：

请添加示例，我会将您的答案标记为有效！
当我尝试这个时，它会在转换发生时保留两个 div，一个淡入，一个淡出。转换完成后，它会回到一个 div。通过将 transition:fade 更改为 in:fade 解决了这个问题

【解决方案2】：

您的#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}

【讨论】：

感谢 Rich 的数组创意，我没想到会这样！希望有朝一日key 登陆 Svelte。