React-Spring动画报错：Got NaN while animating 求助

1. 修正useTransition的from配置写法 #

你当前用了嵌套的next回调来写from函数，这种写法是给异步获取初始值的场景用的，但你的item已经带了明确的x/y数值，反而会让React Spring无法正确解析初始动画值。直接返回包含初始坐标的对象就行：

const transition = useTransition(items, {
  from: (item) => ({
    x: item.x,
    y: item.y,
    opacity: 0, // 建议初始透明度设为0，进入时过渡到1，动画更自然
  }),
  enter: {
    y: 0,
    opacity: 1,
  },
  leave: {
    y: 800,
    opacity: 0,
  },
  trail: 200,
})

2. 给每个过渡元素加唯一标识 #

你现在的三个item对象完全一样，React Spring没法区分不同的过渡元素，会导致状态混乱进而出现NaN。给每个item加唯一id：

// 设置items时添加id
setItems(v => v.length ? [] : [
  { id: 1, x: x, y: y },
  { id: 2, x: x, y: y },
  { id: 3, x: x, y: y },
]);

// 在useTransition里指定key字段
const transition = useTransition(items, {
  keys: item => item.id,
  // 其他配置...
})

3. 确保动画属性正确映射到CSS #

React Spring的x/y默认对应CSS的transform: translate()，如果直接把x/y丢进style，需要明确单位，或者更规范的写法是直接用transform语法：

// 修改transition的配置，用transform替代单独的y属性
enter: {
  transform: 'translateY(0)',
  opacity: 1,
},
leave: {
  transform: 'translateY(800px)',
  opacity: 0,
},
// 同时from里的初始值也要对应
from: (item) => ({
  transform: `translate(${item.x}px, ${item.y}px)`,
  opacity: 0,
}),

4. 给容器加定位兜底 #

确保.container设置了position: relative，这样你计算的x/y坐标是相对于容器的，避免动画时坐标计算异常：

.container {
  position: relative;
  /* 其他样式 */
}

额外兜底检查 #

触发动画时，先确认.deck和.container元素存在，避免DOM获取失败导致的数值异常：

function animateCards() {
  const deck = document.querySelector('.deck');
  const container = document.querySelector('.container');
  if (!deck || !container) return; // 元素不存在直接返回
  // 后续坐标计算逻辑...
}

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