React-Move中Timing字段失效问题求助

核心排查方向与修复方案 #

1. 版本与导入方式匹配 #

Codepen示例大概率用的是React-Move v2.x，而你本地可能安装了v3.x+，两者API存在差异：

• 若为v3.x+，正确导入Timing：

  import { Timing } from 'react-move'
  

  不要使用旧版的import Timing from 'react-move/lib/Timing'路径。

2. 确保data引用更新 #

React-Move通过浅比较data属性判断是否触发动画，直接修改原对象不会触发更新，必须生成新对象：

// 错误写法（引用未变，无动画）
this.setState(prev => {
  prev.data.width = 300;
  return { data: prev.data };
});

// 正确写法（生成新对象，触发动画）
this.setState(prev => ({
  data: { ...prev.data, width: 300 }
}));

3. 校验from/to与时长配置 #

确认Timing的动画参数配置正确，初始状态和from值一致，时长设置合理：

<Timing
  data={this.state.data}
  from={{ width: 100 }}
  to={{ width: this.state.targetWidth }}
  duration={1000} // 明确动画时长，单位ms
>
  {({ width }) => (
    <rect width={width} height={50} fill="#2ecc71" />
  )}
</Timing>

4. 检查React版本兼容性 #

React-Move v3.x要求React 16.8及以上版本支持Hooks，查看package.json中react、react-dom版本，确保满足要求。

5. 排除CSS样式冲突 #

避免全局或局部CSS的transition/animation属性覆盖SVG元素的动画：

rect {
  transition: none !important;
}

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