当div打开并滚动到屏幕上时,向div添加类

因此,我试图通过类动画将fadeInTop类添加到div中。Javascript无法正常工作。。。

控制台返回给我这个返回到那行: 文件querySelectorAll(“.animated”.classList.add(fadeInTop))

Uncaught TypeError: Cannot read properties of undefined (reading 'add')
    at application.js:41:1
    at Array.forEach (<anonymous>)
    at IntersectionObserver.<anonymous> (application.js:39:1)

这在应用程序中。js文件:

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"


const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if(entry.isIntersecting){
      document.querySelectorAll(".animated".classList.add(fadeInTop))
    }
  })
})

observer.observe(document.querySelector(".containerFadeIn"))

这是从家里寄来的。html。雇员再培训局观点:

<main class="home-main">
<%# fist box %>

  <div class="home-text-1 containerFadeIn">
    <div class="row containerFadeIn">
      <div class="col-md-9 d-flex animated">
        <div class="vendo-logo-home">
          <%= image_tag "vendo-logo.png"%>
        </div>
        <div>
          <h1>The Future begins</h1>
          <h1 > with <span class="light-blue"><strong>VENDO</strong></span></h1>
        </div>
      </div>
    </div>
  </div>
</main>

我的主要目标是在文本滚动到屏幕时使文本淡入屏幕(如果我将fadeInTop类添加到淡入动画作品中)