<g> 组件属性更改时 Firefox 不显示动画

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}, [=11=])`} 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 属性，这种方式将在 Firefox 中工作，但是我不想那样做。

有什么帮助吗？

Answer 1

尝试将变换属性移动到样式。它在 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 不显示动画

Firefox does not animate when <g> component attributes change

animation

svg

transition

reactjs