javascript - 向下滚动到该进度条时，如何使该进度条开始动画？

Question

我有这个动画进度条。我想问一下当我向下滚动到进度条时是否可以开始动画？

我知道我应该使用 javascript 让它在滚动上工作，但不知道如何。我将不胜感激任何帮助。

.progress {
  height: 20px;
  border-radius: 5px;
  margin-bottom: 20px;
  position: relative;
}

.progress .progress-bar {
  border-radius: 5px;
  position: absolute;
  top: 0;
  left: 0;
  line-height: 20px;
  animation: animate-positive 6s;
}

.progress .progress-value {
  font-size: 11px;
  color: #fff;
  padding: 0 15px;
  float: right;
}

.progress .progressbar-title {
  font-size: 11px;
  color: #fff;
  padding: 0 15px;
  float: left;
}

@-webkit-keyframes animate-positive {
  0% {
    width: 0%;
  }
}

@keyframes animate-positive {
  0% {
    width: 0%;
  }
}

<div class="progress" style="background:#7f7e7d;">
  <div class="progress-bar" style="width:80%; background: #000000;">
    <div class="progress-value">80%</div>
    <div class="progressbar-title">Progress</div>
  </div>
</div>

标签： javascriptjquery

Answer 1

当我需要向下滚动时添加动画时，我会使用这个库。我认为您可以在此块可见时向 div 添加一些类或 id。