为什么我的键控每个元素在 Svelte 中更新时没有动画？
Why won't my keyed each elements animate on update in Svelte?
我有一个键控的每个元素块，这些元素块用 CSS 定位转换成一个网格。当我交换数组中元素的位置时，元素的顺序在 DOM 中发生变化。但是它们不会动画化到它们的新位置（除了当您单击第二个元素时，它只会以一种方式动画化），尽管在变换 属性 集上有一个 CSS 过渡。这是一个回复：
https://svelte.dev/repl/3a53c81c3f4546f1bd3a879f51f87c76?version=3.42.1
我知道在 Svelte 中还有其他方法可以在网格中放置和移动元素，例如 css 网格、flexbox 和 animate + transition 指令。但我对 repl 中使用的方法特别感兴趣：CSS transforms with CSS transitions.
看起来在幕后，Svelte 正在以静态顺序创建 4 个 div 并更改它们的色调值和内容，而不是它们的翻译 CSS 因为这是根据当前的索引更新的物品。如果你打开 DevTools 并观察 div 在你点击时是如何更新的，你可以看到这一点。
为了确保列表 div 以您希望的方式重新呈现（静态顺序、内容、色调，只是翻译更改）我建议根据每个项目中固定的内容生成翻译 CSS 值对象，例如订单 属性。然后，您可以根据需要更改顺序 属性，而不是重新排序列表项。
工作示例：
https://svelte.dev/repl/9c8a1b7f69e14a958bf66b50989ebc72?version=3.42.1
我有一个键控的每个元素块，这些元素块用 CSS 定位转换成一个网格。当我交换数组中元素的位置时，元素的顺序在 DOM 中发生变化。但是它们不会动画化到它们的新位置（除了当您单击第二个元素时，它只会以一种方式动画化），尽管在变换 属性 集上有一个 CSS 过渡。这是一个回复：
https://svelte.dev/repl/3a53c81c3f4546f1bd3a879f51f87c76?version=3.42.1
我知道在 Svelte 中还有其他方法可以在网格中放置和移动元素，例如 css 网格、flexbox 和 animate + transition 指令。但我对 repl 中使用的方法特别感兴趣：CSS transforms with CSS transitions.
看起来在幕后，Svelte 正在以静态顺序创建 4 个 div 并更改它们的色调值和内容，而不是它们的翻译 CSS 因为这是根据当前的索引更新的物品。如果你打开 DevTools 并观察 div 在你点击时是如何更新的，你可以看到这一点。
为了确保列表 div 以您希望的方式重新呈现（静态顺序、内容、色调，只是翻译更改）我建议根据每个项目中固定的内容生成翻译 CSS 值对象，例如订单 属性。然后，您可以根据需要更改顺序 属性，而不是重新排序列表项。
工作示例： https://svelte.dev/repl/9c8a1b7f69e14a958bf66b50989ebc72?version=3.42.1