Así que estoy tratando de agregar la clase fadeInTop al div con la animación de la clase. El javascript no funciona correctamente...
La consola me devuelve esto que vuelve a esa línea: 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)Esto está en el archivo 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"))Esto es de la vista 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>mi objetivo principal es hacer que el texto se desvanezca en la pantalla cuando el texto se desplace hacia la pantalla (si agrego la clase fadeInTop a los trabajos de animación de fundido)
Esto no se ve bien document.querySelectorAll(".animated".classList.add(fadeInTop))
document.querySelectorAll , esto debería devolver la lista de nodos, por lo que debe iterar a través de todos los elementos como: document.querySelectorAll(".animated").forEach(element => element.classList.add("fadeInTop"))
Tenga en cuenta que la lista de nodos no es una matriz, pero acepta el método forEach. Es posible que desee convertir eso en una matriz como Array.from(document.querySelectorAll(".animated")) y luego llamar al método forEach.
document.querySelector(".animated").classList.add("fadeInTop")