当 div 元素出现在视口中时触发动画

Question

我正在使用滚动触发器 from this answer 构建一个 progressbar.js 动画，一旦整个进度条 div 在视口中就会触发。

动画在没有触发器的情况下正常工作，它只是在页面加载时运行。但是当元素滚动到全视图时我无法触发它。

下面的示例代码在顶部有一个 div 间隙，因此您可以在动画开始之前向下滚动，尽管这显然是我无法工作的部分。

function privacyScoreCircle() {
  // progressbar.js circle
  var bar = new ProgressBar.Circle(document.getElementById('privacy-score-circle'), {
    color: '#aaa',
    // This has to be the same size as the maximum width to
    // prevent clipping
    strokeWidth: 4,
    trailWidth: 4,
    easing: 'easeInOut',
    duration: 1400,
    text: {
      autoStyleContainer: false
    },
    from: {
      color: '#dddddd',
      width: 4
    },
    to: {
      color: '#aaaaaa',
      width: 4
    },
    // Set default step function for all animate calls
    step: function(state, circle) {
      circle.path.setAttribute('stroke', state.color);
      circle.path.setAttribute('stroke-width', state.width);

      var value = Math.round(circle.value() * 100);
      if (value === 0) {
        circle.setText('');
      } else {
        circle.setText(value + '%');
      }

    }
  });
  bar.text.style.fontFamily = '"Montserrat", sans-serif';
  bar.text.style.fontSize = '1.7rem';
  bar.trail.setAttribute('stroke-linecap', 'round');
  bar.path.setAttribute('stroke-linecap', 'round');
  //bar.animate(0.97); // <-- ANIMATION CAN BE TRIGGERED INSTANTLY USING THIS

}
privacyScoreCircle();

// Check if element is scrolled into view
function isScrolledIntoView(elem) {
  var docViewTop = $(window).scrollTop();
  var docViewBottom = docViewTop + $(window).height();

  var elemTop = $(elem).offset().top;
  var elemBottom = elemTop + $(elem).height();

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

function Utils() {

}

Utils.prototype = {
  constructor: Utils,
  isElementInView: function(element, fullyInView) {
    var pageTop = $(window).scrollTop();
    var pageBottom = pageTop + $(window).height();
    var elementTop = $(element).offset().top;
    var elementBottom = elementTop + $(element).height();

    if (fullyInView === true) {
      return ((pageTop < elementTop) && (pageBottom > elementBottom));
    } else {
      return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
    }
  }
};

var Utils = new Utils();

var isElementInView = Utils.isElementInView($('#privacy-score-circle'), false);

if (isElementInView) {
  bar.animate(0.97);
}

#gap {
  height: 500px;
}

#privacy-score-circle {
  margin: auto;
  width: 200px;
  height: 200px;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.0.1/progressbar.min.js"></script>
<div id="gap">Scroll down to activate animation</div>
<div id="privacy-score-circle"></div>

Answer 1

您应该在代码中应用这些更改：

1. 您在privacyScoreCircle() 函数中声明了bar 变量。函数内部定义的变量不能从函数外部访问。因此，将其定义为全局变量。
2. 您应该在窗口滚动时执行动画。

你可以看到代码正常工作here。