带动画的事件时间线

我想要构建的是一个带有一些动画的垂直时间轴组件。我尝试的动画是从第一个圆圈开始，无论哪个项目的状态为true，垂直线都会从上到下绘制，同时无论完成哪个步骤，当线穿过它时，都会从圆形变为已完成的复选标记。

我怎样才能实现上面的动画，到目前为止我已经尝试过，但不知道如何实现上面的效果。

我想实现什么目标this https://i.stack.imgur.com/yoUgm.jpg

sandbox https://codesandbox.io/s/loving-wave-1bjqv

任何帮助表示赞赏。

我修改了你的沙箱以使其正常工作：https://codesandbox.io/s/animable-timeline-reactjs-tiofz https://codesandbox.io/s/animable-timeline-reactjs-tiofz

1. 对于动画，我使用了以下 CSS：

   div {
     height: 200px;
     width: 10px;
   }
   
   .green-progress {
     background: linear-gradient(0, #00a36c, #00a36c) no-repeat, #ccc;
     background-size: 100% 0;
     animation: progressAnim 3s linear infinite forwards;
   }
   
   @keyframes progressAnim {
     0% {
       background-size: 100% 0;
     }
     100% {
       background-size: 100% 100%;
     }
   }

   <div class="green-progress"></div>

   
   To animate actual time line we'll remove vertical bar from first entry and there will be only checked circle. From second entry onwards we'll have a vertical bar and checked circle. To make them consistent they've been shifted upwards. To show progress, the bar will fill and then circle will be checked.

2. 已转换App有状态组件，以便我们可以维护动画状态。 在构造函数中，对于添加的每个条目id, startAnim, and checked状态。在这里，我们将设置startAnim标志在相应的 TimelineConnector 上启动动画。和checked用于控制对圆圈进行复选标记。

3. In TimelineConnector将类设置为 green-progress ifthis.props.startAnim是真的。还添加了onAnimationEnd处理程序为{() => this.props.onAnimDone(this.props.id)}。这告诉 App 组件动画是在该组件上完成的id.

4. In TimelineDot used props.event.checked设置选中状态。

5. 在App中添加了生命周期钩子componentDidMount当所有组件都添加到实际 DOM 时，它将被调用。在挂钩中，选中第一个圆圈并在第一个 TimelineConnector 上启动动画。

6. 当 TimelineConnector 完成动画时，它会调用startNextAnim在应用程序中。在该方法中，您首先完成最后一个条目上的复选标记。如果条目有则开始下一个动画status:true.

We could've added delays to each animation and ran them at once. But parent controlling each component and each component notifying when animation is done makes it more flexible to update the code. You can have different animations for each entry, based on their state.

We can use react-spring animation library but things will get complicated. CSS animation is the simplest solution.