当 Waypoints 在浏览器中可见时，如何为 Progressbar.js 设置动画？

Question

我正在使用 Progressbar.js 创建动画进度条。但问题是当我把它放下时，它还没有出现。我正在使用 Waypoints 仅在可见时触发动画，但我做错了。

请帮我解决一下。

谢谢。

var bar = new ProgressBar.Line(container, {
        strokeWidth: 5,
        easing: 'easeInOut',
        duration: 1400,
        color: '#FFEA82',
        trailColor: '#eee',
        trailWidth: 2,
    });

    bar.animate(1.0);  // Number from 0.0 to 1.0

#container{
  margin-top:500px;
  width: 300px;
  height: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.0.1/progressbar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>


scroll down
<div id="container"></div>

Answer 1

简单 waypoints 即可。但请注意，默认情况下 waypoints 仅在元素到达页面顶部时才会触发。滚动页面只是让它出现在底部是不够的。它必须一直向上或者您可以使用 offset 参数来帮助。

var bar = new ProgressBar.Line(container, {
        strokeWidth: 5,
        easing: 'easeInOut',
        duration: 1400,
        color: '#FFEA82',
        trailColor: '#eee',
        trailWidth: 2,
    });

    $("#container").waypoint(function(){
       bar.animate(1.0);  // Number from 0.0 to 1.0
    }, {offset: "50%"})

#container{
  margin-top:500px;
  margin-bottom:500px;
  width: 300px;
  height: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.0.1/progressbar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>


scroll down
<div id="container"></div>

当 Waypoints 在浏览器中可见时，如何为 Progressbar.js 设置动画？

How to animate Progressbar.js when comes visible in the browser with Waypoints?

html

jquery

jquery-waypoints