延迟链中的 CSS 动画，当在视口上可见时

Question

我有this jfiddle 在哪里：

1. CSS 动画在 div 出现在视口上时开始。
2. 我有一个 未知 号码 div，带有一个图标和 2 个文本行。

我需要什么：

1. 每个图标相对于下一个图标都有延迟。在我的 jsfiddle 中，所有图标都是同时动画的。

2. 实际程序可能有 1、2 或 300 个 divs 和一个图标，解决方案必须适用于任何数字，而不仅仅是我的 jsfiddle 示例中的 3 项。

3. 我在 divs 上有引导程序，并且使用滚动控件，动画只有在 div 出现在视口上时才会开始，而在笔记本电脑上我会连续显示 6 个图标，仅在智能手机上1.

var $animation_elements = $('.animation-element');
var $window = $(window);

function check_if_in_view() {
    var window_height = $window.height();
    var window_top_position = $window.scrollTop();
    var window_bottom_position = (window_top_position + window_height + 15);

    $.each($animation_elements, function() {
        var $element = $(this);
        var element_height = $element.outerHeight();
        var element_top_position = $element.offset().top;
        var element_bottom_position = (element_top_position + element_height);

        //check to see if this current container is within viewport
        if ((element_bottom_position >= window_top_position) &&
           (element_top_position <= window_bottom_position)) {
              $element.addClass('in-view');
        else {
              $element.removeClass('in-view');
    }
});
$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll'); 

Answer 1

1. 在 JavaScript 中设置延迟操作的函数是 setTimeout()，您可以使用它为每个元素（每次迭代）设置一个（在这种情况下）延迟操作。 但是在 for 循环中，您无法在 setTimeout() 中实时访问外部变量，因此您需要通过闭包来实现（ref1，ref2）：

   (function(delay, $element, savedtimeout) {
        // 'savedtimeout'(alias of timeouts) is accessible.
        // but 'timeouts'(external var) is not accessible in realtime.
        savedtimeout[i][0] = setTimeout(function() {
            //Start animation
            $element.removeClass('paused');
            countInView--;
        }, delay, timeouts);
   })(delay, $element, timeouts);
   

   要删除特定图标的延迟操作，您必须将其returning ID 分配给一个变量，然后您可以使用removeTimeout(ID) 以给定ID 中断其执行：

   timeouts[i][0] = setTimeout(); // Returns an unique ID
   clearTimeout(timeouts[i][0]);
   

   • 您可以查看我的另一个post，了解如何管理和保存每个图标的超时 ID。
   • 你正在使用的函数$.eachcannot be reset to 0它的索引，所以它为未来的实现提供了更少的选择。我宁愿用for 循环替换，利用它的索引。

2. 您将 div 宽度缩小得越多，您的智能手机将能够显示的 div 越多。 所以你必须为宽度加上前缀，否则每个 div 似乎都会覆盖设备屏幕上的所有宽度：

   .slide-left {
       width: 150px; /* e.g. */
   }
   

总共解决方案：https://jsfiddle.net/quq2q9cg/