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

简单的航点可以。但请注意，默认情况下，只有当元素到达页面顶部时才会触发。滚动页面只是为了让它出现在底部是不够的。它必须一直向上，或者您可以使用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的动画？

1 个答案: