ReactJS + SVG：点击 FireFox 的动画路径“d”

Question

CodePen 在这里： https ://codepen.io/sadpandas/pen/xxbpKvz

const [currentScreen, setCurrentScreen] = React.useState(0);

return (
    <React.Fragment>
    <div>
       <svg
        className="theSvg"
        width="156" height="600" viewBox="0 0 156 600" xmlns="http://www.w3.org/2000/svg">
        <path
            d={pathArray[currentScreen].path}
            stroke={pathArray[currentScreen].strokeColor}
            fill="none"
        >
        </path>
    </svg>
    </div>
    <div>
        <div>
        <button onClick={()=> setCurrentScreen(0)}>0</button>
        <button onClick={()=> setCurrentScreen(1)}>1</button>
        <button onClick={()=> setCurrentScreen(2)}>2</button>
    </div>
    </div>
</React.Fragment>

我正在尝试在单击按钮时变形 SVG 路径。 这在 Chrome 中完美运行，但在 Firefox 中忽略了转换。

我目前的理解是 Firefox 还不支持这种动画。 我在这里有哪些选择？ 我应该回到使用标签吗？

我看过一些使用标签的例子，但它们都只是转换，而不是点击触发。 我必须使用 ReactJs 来解决这个问题，所以 JQuery 也不行。 如果可能，我还想避免使用包，因为这是我整个应用程序中唯一会使用 SVG 变形的地方。

任何提示将非常感谢。 谢谢！

Answer 1

最终使用了 animate 标签。 现在可以在 Firefox 和 Chrome 上正常工作。

对于也在学习 SVG 动画的任何人：CodePen： https ://codepen.io/sadpandas/pen/GRgyrOJ ? editors = 1010

const ButtonAndStrings = () => {
    const [currentScreen, setCurrentScreen] = React.useState(0);
    const [oldScreen, setOldScreen] = React.useState(0);


    const handleClick = (index, currentScreen) => {
        setOldScreen(currentScreen)
        setCurrentScreen(index);
    }

    return (
        <>
            <SVGPathAnimation
                path={pathArray[oldScreen]}
                newPath={pathArray[currentScreen]}
            />
            <button onClick={()=> handleClick(0, currentScreen)}>0</button>
            <button onClick={()=> handleClick(1, currentScreen)}>1</button>
            <button onClick={()=> handleClick(2, currentScreen)}>2</button>
        </>
    )
}

SVG 有一种叫做“动画时间线”的东西。 要发生新动画，需要重置浏览器的时间。 在 react 的情况下，向 SVG 添加 ref 将解决问题。

参考：Jacob Fletcher 的这篇中等文章。