无法使用 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>

无法使用 react-spring 动画化 html 进度

Can't animate html progress using react-spring

javascript

html

reactjs

react-hooks

react-spring