无法使用react-spring为html进度添加动画

Question

我正在尝试使用react-spring为html bar元素添加动画，如下所示：

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>