javascript - ReactJS + SVG : Animate path "d" on click for FireFox

Question

代码笔在这里: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 动画的人:代码笔: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 添加引用可以解决问题。

引用:This medium article作者:雅各布·弗莱彻。