当初始状态等于 "translate3d(0,0,0)" 的动画转换时，useSpring() 不起作用

Question

如何使用useSpring()钩子？

我正在尝试使用 useSpring() 挂钩为转换设置动画属性:

如果初始状态是 "translate3d(0,0,0)"，它根本不起作用，例如，如果我将它初始化为 toggle 是 false:

const props = useSpring({
  transform: toggle ? "translate3d(0,-25px,0)" : "translate3d(0,0,0)"
});

另一方面，这个有效：

const props = useSpring({
  transform: toggle ? "translate3d(0,-25px,0)" : "translate3d(0,1px,0)"
});

这是一个错误吗？谢谢

Answer 1

您必须明确指出 unit 更改。喜欢 pixel 或 percentage。试试这个：

const props = useSpring({
  transform: toggle ? "translate3d(0,-25px,0)" : "translate3d(0,0px,0)"
});

useSpring() doesn't work when animating transform with initial state equal to "translate3d(0,0,0)"