javascript - 当在视口(viewport)上可见时，在链中延迟 CSS 动画

Question

我有this jfiddle其中:

1. 当 div 在视口(viewport)上时，CSS 动画开始。
2. 我有一个未知数量的div，带有一个图标和两行文本。

我需要什么:

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

2. 实际程序可能有 1、2 或 300 个带有图标的 div，该解决方案必须适用于任何数量，而不仅仅是我的 jsfiddle 示例中的 3 个元素。

3. 我在 div 上有 Bootstrap ，并且使用滚动控件时，只有当 div 出现在视口(viewport)上时动画才会开始，而在笔记本上我会显示连续 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。
   • 您正在使用的函数 $.each cannot be reset to 0它的索引，所以它为 future 的实现提供了更少的选择。我宁愿用 for 循环替换，利用它的索引。

2. div 宽度越窄，您的智能手机能够显示的 div 就越多。 所以你必须在宽度前加上前缀，否则看起来每个 div 都会覆盖你设备屏幕上的所有宽度:

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

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