Question

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

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

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

Answer 1

使用javasript函数onscroll()。将onscroll函数设置为div标记，并使用setTimeOut()和clearTimeOut()设置动画。事件函数onscroll()将触发动画，直到它到达目标div标记为止。

Answer 2

所以，这是我能提出的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，我为一个包含动画的行分配了一个航点（标识为#startAnimation）。一旦到达该航点，我就会设置超时，这些延迟会增加必要的css类，从而触发动画。

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

滚动时的setTimeout触发器

2 个答案: