javascript - 滚动时触发 setTimeout

Question

我正在尝试延迟超时效果，目前效果在页面加载时开始，我希望它在我滚动到某个 div 时开始 Here is how it currently is

我做了一些搜索，发现了一个名为 waypoint 的库，它允许使用下面的代码基于路点触发事件，但没有成功。我还尝试将显示设置为无，并在触发 css 动画后更改它，但当它出现时在页面上，进度条已经就位。

 var waypoint = new Waypoint({
  element: document.getElementById('waypoint'),
  handler: function(direction) {
    console.log('Scrolled to waypoint!')
  }
})

Answer 1

所以，这是我可以想出的 JSFiddle。 https://jsfiddle.net/md0m60cb/6/

看看 CSS，我在那里将一些 ID 更改为类。这样，我在 Javascript 中执行了以下操作:

            $(document).ready(function () {
            $('#startAnimation').waypoint(function () {
                setTimeout(function () {
                    $('#progress-html').addClass('progress-html-class');
                }, 2800);

                setTimeout(function () {
                    $('#progress-css').addClass('progress-css-class');
                }, 3500);

                setTimeout(function () {
                    $('#progress-javascript').addClass('progress-javascript-class');
                }, 4200);

                setTimeout(function () {
                    $('#progress-php').addClass('progress-php-class');
                }, 4900);

                setTimeout(function () {
                    $('#progress-angular').addClass('progress-angular-class');
                }, 5600);
            });
        });

那么，它有什么作用呢？使用 JQuery，我为保存动画的行分配了一个路径点(id 为 #startAnimation)。一旦它到达那个路点，我就设置了不同延迟的超时，添加了必要的 css 类，这反过来又触发了动画。

我希望我能澄清我在这里所做的事情。如果您有问题，请回复。