無法使用 react-spring 為 html 進度設置動畫

Question

我正在嘗試使用 react-spring 像這樣為 html 條形元素設置動畫：

import { useSpring, animated } from 'react-spring'

const Example = ()=> {
    const props = useSpring({ value: 320, from: { value: 0 } });

    return (
    <animated.div>
       <progress style={{width:"70%"}} id="file" value={props.value}  max="1000"/>
    <animated.div/>
   )
}

它根本行不通

這是 html 進度條的限制還是我有什么問題？

我對 CodeSanbox 進行了一些編輯以顯示它（不）工作： https://codesandbox.io/s/react-spring-usespring-hook-forked-d5sez?file=/src/index.js

謝謝

Answer 1

嘗試使用進度的動畫版本。 並使用道具的價值。

<div>
  <animated.progress id="file" value={props.value} max="1000" />
</div>