为什么Svelte中带key的each块元素更新时CSS transform过渡动画不触发？

问题根因 #

• Keyed each块在数组项交换时，Svelte会同步执行两个操作：重排DOM节点顺序、更新节点绑定的transform计算值
• 这两个操作会被浏览器合并到同一帧的样式计算阶段处理，transition无法捕获到transform属性的前后差值——因为DOM节点的位置基准本身已经改变，没有可用的过渡起始态
• 你遇到的仅点击第二个元素时有单向动画，属于渲染时序差导致的偶发现象，不是稳定可复用的逻辑

修复方案 #

需要把DOM重排和transform更新拆分到两个渲染帧执行，让浏览器先记录元素在旧DOM位置的状态，再更新transform触发过渡：

1. 第一步先临时冻结所有元素的transform值，同时交换数组触发DOM重排，此时元素视觉位置不会发生变化
2. 下一帧（用requestAnimationFrame包裹）再把transform值更新为新位置对应的计算值，此时transition就能正常捕获属性差值，触发平滑动画

具体代码修改点 #

首先给每个列表项绑定独立的响应式transform变量，不要在模板内实时计算transform：

// 初始化数组时就给每一项预存对应位置的transform值
const colNum = 3 // 你的网格列数
const cellWidth = 100 // 你的单元格宽度
const cellHeight = 100 // 你的单元格高度
let items = originalArr.map((item, idx) => ({
  ...item,
  transform: `translate(${(idx % colNum) * cellWidth}px, ${Math.floor(idx / colNum) * cellHeight}px)`
}))

然后调整交换逻辑：

function swapItems(idx1, idx2) {
  // 缓存交换前所有元素的transform值，临时冻结视觉位置
  const tempTransforms = items.map(i => i.transform)
  // 交换数组项，触发DOM重排，此时transform还是旧值，元素视觉位置不变
  [items[idx1], items[idx2]] = [items[idx2], items[idx1]]
  // 下一帧再更新所有transform为新位置的计算值，触发过渡
  requestAnimationFrame(() => {
    items.forEach((item, idx) => {
      item.transform = `translate(${(idx % colNum) * cellWidth}px, ${Math.floor(idx / colNum) * cellHeight}px)`
    })
  })
}

模板部分直接绑定预存的transform变量即可：

{#each items as item (item.id)}
  <div class="grid-item" style="transform: {item.transform}">
    {item.content}
  </div>
{/each}

CSS部分不需要调整，保留你原本设置的transition: transform 0.3s ease规则即可。

注意事项 #

• 不要直接在模板的style属性里实时计算transform，必须用响应式变量存储，才能精准控制更新时机
• 不要用setTimeout代替requestAnimationFrame，前者会引入额外延迟，可能出现元素闪跳问题

内容的提问来源于stack exchange，提问作者gwezerek