javascript - 在 div 上运行 CSS 动画的 Vanilla JavaScript 滚动到 View 中不起作用

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 滚动到 View 中时播放动画。 实际结果:即使 div 不可见，也会在加载页面时播放动画。

Answer 1

问题似乎取决于您的 CSS。对于进入视口(viewport)的元素，您的 JavaScript 将 .animatemeplz 类替换为 .animate 和 .fadeIn 类，因此以下形式的 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);
    }
} );