在视口中可见时Javascript进行动画处理

Question

我具有以下HTML结构和相应的JavaScript。我想为>>> s2 <= s True >>> s - s2 set([(9, (19, 29, 39, 49, 59, 69, 79, 89))]) ，.half-width-text和.list-div制作动画。
因此，我编写了JavaScript。我将.list-div2用作每个元素的元素，然后查找与要设置动画的类层次结构匹配的所有子元素。但是，通过这种方式，所有动画都在加载页面时切换，而不是在元素按预期在视口中可见时切换。
有人可以帮我吗？
更新：
https://codepen.io/anon/pen/MqMeKE

container

(function($) {
  $.fn.visible = function(partial) {

    var $t = $(this),
      $w = $(window),
      viewTop = $w.scrollTop(),
      viewBottom = viewTop + $w.height(),
      _top = $t.offset().top,
      _bottom = _top + $t.height(),
      compareTop = partial === true ? _bottom : _top,
      compareBottom = partial === true ? _top : _bottom;

    return ((compareBottom <= viewBottom) && (compareTop >= viewTop));

  };

})(jQuery);

var win = $(window);

var allModifications = $(".container");


//make all elements visible that are directly visible
allModifications.each(function(i, el) {
  var el = $(el);
  if (el.visible(true)) {
    el.find(".half-width-text").addClass("open");
    el.find(".list-div ul li").addClass("animate");
  }
});


//make elements visible that get scrolled into the viewport
win.scroll(function(event) {
  var current = 5;
  var current2 = 1;
  allModifications.each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
      el.find(".half-width-text").addClass("open");
      el.find(".list-div ul li").each(function() {
        $(this).addClass("animate").css("animation-delay", current + 's');
        current++;
      });
      el.find(".list-div2 ul li").each(function() {
        $(this).addClass("animate").css("animation-delay", current2 + 's');
        current2++;
      });
    }
  });

});