Question

我正在SVG中创建一些动画的React组件。当我在Chrome中运行它时，动画有效，但是当我在Firefox中运行它时，动画却没有。

这里是一个例子：

const [x, setX] = useState(0)

useEffect(() => {
  setTimeout(() => {
    setX(100)
  }, 3000)
}, [])

return (
  <svg width={500} height={300}>
    <g transform={`translate(${x}, ${0})`} style={{ transition: "3s all" }}>
      <rect width={50} height={50} x={0} y={0} fill={'#f00'} />
    </g>
  </svg>
)

您可以看到它可以在Chrome中运行，但不能在Firefox中运行：https://codesandbox.io/s/gracious-ives-ykmfp

如果我删除了 g 中的转换并直接在 rect 的x prop中进行了更改，则该方法将在Firefox中有效，但我不想这样做这样。

有帮助吗？

Answer 1

尝试将transform属性移至样式。它在FF中以这种方式对我有效：

<g style={{transform: `translateX(${x}px)`, transition: "3s all" }}>
  <rect width={50} height={50} x={0} y={0} fill={"#f00"} />
</g>

https://codesandbox.io/s/musing-cdn-7eqg0

Answer 2

transform属性与transform CSS属性不同，尽管它可能会造成混淆（显然是两个will be merged）。

将变换移至样式属性，而不是使用属性：

const [x, setX] = useState(0);

useEffect(() => {
  setTimeout(() => {
    setX(100);
  }, 3000);
}, []);

return (
  <svg width={500} height={300}>
    <g style={{ transform: `translate(${x}px, 0px)`, transition: 'all 3s' }}>
      <rect width={50} height={50} x={0} y={0} fill={'#f00'} />
    </g>
  </svg>
);

演示：https://codesandbox.io/s/nifty-snowflake-664rk

当<g>组件属性更改时，Firefox不会进行动画处理

2 个答案: