Javascript 在设置动画后更改进度值

我正在使用react animate on scroll软件包为我的页面设置动画，在这个页面中我有一些进度条

我想在滚动动画完成后设置进度条的动画

例如：

进度条将从左侧开始设置动画，到达屏幕上的位置后，将更改进度条的宽度，直到指定的值

到目前为止，我的代码如下所示：

import React, { Component } from "react";
import ScrollAnimation from "react-animate-on-scroll";


const Progress = ({ done }) => {
const [style, setStyle] = React.useState({});

setTimeout(() => {
 const newStyle = {
  opacity: 1,
  width: `${done}%`,
};

setStyle(newStyle);
}, 1000);

return (
  <div className="progress">
    <p className="progress-done" style={style}></p>
  </div>
 );
};


class Skills extends Component {
 constructor(props) {
  super(props);
  this.state = {
    a1: "0",
  };
}

render() {
   return (
     <>
       <div id="skills">
         <div id="skills-content">
           <p className="skillsmsg">Skills</p>
         </div>
         <div id="skills-set">
           <ul className="flex-container">
             <li className="flex-item-skills">
               <ScrollAnimation
                 animateIn="slideInLeft"
                 offset={200}
                 afterAnimatedIn={function afterAnimatedIn(v) {
                   if (v.inViewport) {
                   (Not sure how to change the state of a1 here)
                   }
                 }}
               >
              <p>HTML/HTML5/XHTML</p>
              <Progress done={this.state.a1} />
            </ScrollAnimation>
            </li>
         </ul>
       </div>
     </div>

import React，{Component}来自“React”；
从“在滚动时反应动画”导入滚动动画；
常量进度=（{done}）=>{
const[style，setStyle]=React.useState（{}）；
设置超时（（）=>{
常量新闻样式={
不透明度：1，
宽度：`${done}%`，
};
设置样式（新闻样式）；
}, 1000);
返回(

);
};
类技能扩展组件{
建造师（道具）{
超级（道具）；
此.state={
a1:“0”，
};
}
render（）{
返回(
技能



HTML/HTML5/XHTML

我不确定如何更改函数afterAnimatedIn中进度条的状态

React animate on scroll提供了该选项，但我不确定如何实现它

任何帮助都将不胜感激

亲切问候,

FFAS