我正在尝试修复一个问题，当用户滚动时，视口中的元素已经开始第二次触发动画。这只发生在页面加载到页面的最顶部，然后继续向下滚动。当定位在页面上的其他任何地方时，它工作正常，元素动画正确，不会在视图中触发两次。重申一下，主要的问题是当<section>标签动画时，当我从顶部向下滚动时，它会在页面加载后再次动画，就像最初的闪回一样，这是我不想要的。我该如何修复这个bug？
下面是jsfiddle：https://jsfiddle.net/TheAmazingKnight/oybta7dp/10/

• • 代码尝试：**我尝试了类似这样的方法来检查这些元素是否已经在视图中，在离开视图并重新进入之前不要触发动画，但它不起作用。

if ($(this).isInViewport()) {
 if($(this).parent().hasClass("animate-section") && $(this).parent().hasClass("animate")) {
   $(this).removeClass('animate-element');
   $(this).removeClass('animate');
   return false; // abort function if element is already in view preventing double animation
 }
}

• • jQuery代码：**

$(document).ready(function() {

  var flag = true; // var to detect if function already ran once

  if (flag) {
    // Set the animation to be triggered when the section comes into view
    var sections = $('.animate-section');
    sections.each(function() { // check which sections are in-view on page load
      if ($(this).isInViewport()) {
        $(this).addClass('animate'); // Add the "animate" class to trigger the animation
      } else {
        $(this).removeClass('animate'); // Remove the "animate" class if the section is out of view
      }
    });
    flag = false; // change boolean var as function already ran once
  }
  // Set the animation to be triggered when the element comes into view
  var elements = $('.animate-element');
  $(window).scroll(function() {
    elements.each(function() {
      if ($(this).isInViewport()) {
            if($(this).parent().hasClass("animate-section") && $(this).parent().hasClass("animate")) {
                $(this).removeClass('animate-element');
                $(this).removeClass('animate');
                //return false; // abort function if element is already in view preventing double animation
            }
        $(this).css("visibility", "visible");
        $(this).addClass('animate'); // Add the "animate" class to trigger the animation
      } else {
        $(this).css("visibility", "hidden");
        $(this).removeClass('animate'); // Remove the "animate" class if the section is out of view
      }
    });
  });

});
// jQuery function to check if element is visible in viewport
$.fn.isInViewport = function() {
  var elementTop = $(this).offset().top;
  var elementBottom = elementTop + $(this).outerHeight();

  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();

  return elementBottom > viewportTop && elementTop < viewportBottom;
};

• • 编辑：**

由于这种双重动画效果只出现在页面的顶部，我暂时添加了一个代码破解的解决方案。但是如果有人能想出一个解决方案就太好了。谢谢!

$(document).ready(function () {
  // code hack to scroll ever-so-slightly to trigger animating the elements only if initially loaded at the top of page to avoid double animation effect when user scrolls  
  if (window.scrollY == 0) {
    Scrolldown();
  }
});

// function to scroll ever-so-slightly
function Scrolldown() {
   window.scroll(0, 1);
}