Question

我的圈子进展顺利（纯CSS），一切正常。动画非常完美，停在我想要的地方。

问题是当我滚动页面以查看圆圈时，动画结束了。我正在尝试实施Waypoint，但没有成功。

感谢您的帮助！

$(document).ready(function() {
  $('.progress-value').waypoint(function() {
    $('.progress-value').css({
      animation: "anima"
    });
  }), { offset: '1000px' }
});

.scroll {
  height:1000px
}

.progress-value {
  stroke-dasharray: 339.292;
  stroke-dashoffset: 84.823;
  -webkit-animation: anima 3s;
          animation: anima 3s;
}
@-webkit-keyframes anima {
  from {
    stroke-dashoffset: 339.292;
  }
  to {
    
    stroke-dashoffset: 84.823;
  }
}
@keyframes anima {
  from {
    stroke-dashoffset: 339.292;
  }
  to {
    stroke-dashoffset: 84.823;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/noframework.waypoints.min.js"></script>

<div class="scroll">
  Space Height for scroll
</div>
<svg width="120" height="120" viewBox="0 0 120 120">
  <circle cx="60" cy="60" r="54" fill="none" stroke="#dededf" stroke-width="5" />
  <circle class="progress-value" cx="60" cy="60" r="54" fill="none" stroke="#d75e7a" stroke-width="5" stroke-dasharray="339.292" stroke-dashoffset="84.823" transform="rotate(-90 60 60)"/>
</svg>

圈进度CSS + Waypoint.js

0 个答案: