Vanilla JavaScript 在 div 滚动到视图中运行 CSS 动画不起作用

Question

当 div 进入可见屏幕时，我正在尝试运行 CSS 动画。但是，我注意到页面加载时动画正在播放，无论如何。

我用谷歌搜索了这个问题，我把代码弄乱了，似乎没有什么能给我正确的结果。

JavaScript

    var animateHTML = function() {
    var elems;
    var windowHeight;
    function init() {
      elems = document.querySelectorAll('.animatemeplz');
      windowHeight = window.innerHeight;
      addEventHandlers();
      checkPosition();
    }
    function addEventHandlers() {
      window.addEventListener('scroll', checkPosition);
      window.addEventListener('resize', init);
    }
    function checkPosition() {
      for (var i = 0; i < elems.length; i++) {
        var positionFromTop = elems[i].getBoundingClientRect().top;
        if (positionFromTop - windowHeight <= 0) {
          elems[i].className = elems[i].className.replace(
            'animatemeplz',
            'animated fadeIn'
          );
        }
      }
    }
    return {
      init: init
    };
  };
  animateHTML().init();

HTML

        <div class="menu">
      <div class="side-olay">
        <p class="side-num">01</p>
        <p class="side-nums">02</p>
        <p class="side-nums">03</p>
        <p class="side-nums">04</p>
      </div>
    </div>
<!-- START OF INITAL SCREEN -->
  <div class="head rellax" data-rellax-speed="-10">
    <img class="logo" src="img/logo.png">
    <div class="ld1"></div>
    <div class="ld2"></div>
    <div class="ld3"></div>
    <h3>SERVER <span style="font-weight: bold;">MOTTO</span></h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor<br> incididunt ut ero labore et dolore.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor<br> incididunt ut ero labore et dolore.</p>
    <div class="line"></div>
    <a href="#" class="button1">Discord Server</a>
    <img class="side" src="img/side.png">
  </div>

  <div class="stats">
    <div class="chart animatemeplz">
      <div class="chart-olay">
        <ul>
          <li>100</li>
          <li>50</li>
          <li>25</li>
          <li>0</li>
        </ul>
      </div>
      <img src="img/Group%2012.png">
      <div class="chart-bar"></div>
      <div class="chart-bar"></div>
      <div class="chart-bar"></div>
      <div class="chart-bar"></div>
      <div class="chart-bar"></div>
      <div class="chart-bar"></div>
      <div class="chart-bar"></div>
      <div class="chart-bar"></div>
    </div>
    <h1 class="h1 animatemeplz">STATISTICS</h1>
    <p class="p1 animatemeplz">Lorem ipsum dolor sit amet,<br>consectetur adipsicing elit, sed do<br>eiusmod.</p>

    <h1 class="h2 animatemeplz">FILTER</h1> <a class="filer-btn animatemeplz">Today</a><a class="filer-btn animatemeplz">A Month Ago</a><a class="filer-btn animatemeplz">4 Months Ago</a>
    <p class="p2 animatemeplz">Filter our updated statistic log through clicking designated buttons to alter your filtered result.</p>
  </div>

  <div class="feat">
    <div class="featside">
      <div class="sidedot"></div>
      <div class="sidedot2"></div>
      <div class="sidedot3"></div>
    </div>
    <img class="featbg" src="img/featbg.png">
    <h1>Features</h1>
    <div class="line"></div>
    <H1><span id="typed">Down to Roleplay ping-able role (@DTRP)</span></H1>
    <!--<h1>Down to Roleplay ping-able role (@DTRP) </h1>-->
    <p style="margin-left: 20vw;">pingable only every 3 hours or something #DM-request ping spam</p>
  </div>

预期结果：当 div 滚动到视图中时播放动画。 实际结果：即使div不可见，页面加载时也会播放动画。

Answer 1

问题似乎取决于您的 CSS。您的 JavaScript 正在用 .animate 和 .fadeIn 类替换进入视口的元素的 .animatemeplz 类，因此以下形式的 CSS 应确保动画正常工作：

.animatemeplz {
    opacity: 0;
}
.animated {
    transition: opacity 1s;
}
.fadeIn {
    opacity: 1;
}

---

一种更简洁的方法可能是为需要动画的元素提供一个 .animate 类：

<h1 class="h1 animate">STATISTICS</h1>
<p class="p1 animate">Lorem ipsum dolor sit amet... etc</p>

.animate 和另一个类 .visible 的 CSS 如下：

.animate {
    transition: opacity 1s;
    opacity: 0;
}
.animate.visible {
    opacity: 1;
}

然后您可以使用 JavaScript classList.add 方法切换可见性。

...
if (positionFromTop - windowHeight <= 0) {
    elems[i].classList.add('visible');
} else {
    elems[i].classList.remove('visible');
}
...

这会在您向上滚动时淡出元素。

---

您还在每个滚动事件上调用checkPosition()。这可能会导致某些设备出现延迟，特别是如果 checkPosition() 需要一段时间来计算。有很多方法可以解决这个问题，包括在再次调用checkPosition() 之前等待指定时间长度的去抖动。可以通过将添加滚动事件侦听器的代码替换为以下代码来完成等待时间为 100 毫秒的去抖动：

window.addEventListener( 'scroll', function() {
    if ( !checkPosition.debounce ) {
        checkPosition.debounce = setTimeout(function(){
            delete checkPosition.debounce;
            checkPosition();
        }, 100);
    }
} );