当 div 滚动到屏幕时，将 class 添加到 div

Question

因此，我正在尝试使用 class 动画将 fadeInTop class 添加到 div。 Javascript 无法正常工作...

控制台 returns me this 回到那一行： document.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)

这在 application.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"))

这是来自 home.html.erb 视图：

<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 class 添加到淡入动画作品中）

Answer 1

这看起来不对document.querySelectorAll(".animated".classList.add(fadeInTop))

如果您正在调用 document.querySelectorAll，这应该是 return 节点列表，因此您需要遍历所有元素，例如：

document.querySelectorAll(".animated").forEach(element => element.classList.add("fadeInTop"))

请记住，nodelist 不是数组，但它确实接受 forEach 方法。您可能希望将其转换为 Array.from(document.querySelectorAll(".animated")) 之类的数组，然后调用 forEach 方法。

如果你只有一个元素那么你可以调用：

document.querySelector(".animated").classList.add("fadeInTop")

当 div 滚动到屏幕时，将 class 添加到 div

Adding a class to a div when the div is on scrolled into the screen

html

javascript

css

jquery

ruby-on-rails