react-spring v9中useSpring将transform回退到0时的异常行为如何解决？

问题复现 #

原有v8版本可正常运行的transform动画代码如下：

const props = useSpring({
    to: {
      transform: open ? 'translateY(-50px)' : 'translateY(0)',
    },
  })

升级到v9版本后出现异常表现：

• 初始动画未结束时触发反向动画，运行正常
• 初始动画完全结束后触发反向动画，元素无过渡直接跳回起点

问题原因 #

react-spring v9对静态字符串类型的transform值做了优化，当动画完全结束后，会将该属性标记为静态值，后续切换相同结构的字符串值时，无法正确识别为可动画属性，直接跳过过渡阶段。

修复方案 #

方案1：根层级声明动画属性（旧代码最小改动） #

不需要将transform属性嵌套在to字段内，直接在useSpring配置的根层级声明即可：

const props = useSpring({
  transform: open ? 'translateY(-50px)' : 'translateY(0)',
})

方案2：使用驱动API显式触发动画（可控性最高） #

使用useSpring返回的控制API手动触发状态变化时的动画，规避自动检测异常：

import { useSpring } from '@react-spring/web'
import { useEffect } from 'react'

// 初始化动画
const [props, api] = useSpring(() => ({
  transform: 'translateY(0)'
}))

// 监听open状态变化触发动画
useEffect(() => {
  api.start({
    transform: open ? 'translateY(-50px)' : 'translateY(0)'
  })
}, [open, api])

方案3：使用数值属性替代字符串transform（性能最优） #

react-spring内置支持transform属性解析，直接声明y属性即可自动生成translateY变换，不需要手动拼接字符串，性能更高且不会出现匹配异常：

const props = useSpring({
  y: open ? -50 : 0,
})

// 绑定到元素时
<animated.div style={{ transform: props.y.to(y => `translateY(${y}px)`) }}>
  动画元素
</animated.div>

内容的提问来源于stack exchange，提问作者e.a.