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 的這篇中等文章。