在div上運行CSS動畫的Vanilla JavaScript滾動到視圖中不起作用

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 .animatemeplz進入視口的元素的.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>

CSS用於.animate和另一個.visible類，如下所示：

.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()之前checkPosition()在指定時間段內等待的位置。 通過使用以下代碼替換添加滾動事件偵聽器的代碼，可以以100ms的等待時間進行反跳：

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