He estado buscando y tratando de resolver este problema por un tiempo y no tengo ni idea.

Aquí está mi función de reacción tal como está.

El código en negrita es la función en cuestión, en este momento cómo funciona, es que la función itera a través de la matriz de videos, luego coloca esos elementos al azar, en diferentes momentos debido a setInterval.

 export default function RandomVideos(){ useEffect(() => { const videos = Array.from(document.getElementsByClassName('video_container') as HTMLCollectionOf<HTMLElement>); const Width = (document.getElementById('container') as HTMLElement).offsetWidth; const Height = (document.getElementById('container') as HTMLElement).offsetHeight; function fadeIn(thisVideo: HTMLElement){ thisVideo.classList.add('fade-in'); thisVideo.classList.remove('fade-out'); } function fadeOut(thisVideo: HTMLElement){ thisVideo.classList.add('fade-out'); thisVideo.classList.remove('fade-in'); } function randomlyPlaced(){ videos.forEach(thisVideo => { setInterval(function() { thisVideo.classList.add("fade-in"); const randomTop = Math.round(Math.random() * Height) - 20; const randomLeft = Math.round(Math.random() * Width) - 20; thisVideo.style.top = randomTop +"px"; thisVideo.style.left = randomLeft +"px"; fadeIn(thisVideo) }, (Math.floor(Math.random() * 7000) + 2000)) }) } randomlyPlaced() }); return( <div className="container" id="container"> {RandomVideosProps.map((video) => ( <div className="video_container" key={video.id}> <video src={video.src}></video> {video.text} </div> ))} </div> );}

El código funciona como se esperaba, las primeras iteraciones de los elementos del video se desvanecen, luego cada intervalo se posiciona al azar. Pero quiero que los elementos se desvanezcan en cada intervalo y luego vuelvan a aparecer. No tengo idea de cómo hacer esto ya que el intervalo está dentro del método forEach.

Tener el intervalo fuera del método forEach significa que los elementos de la matriz se colocarán al azar todos juntos, a la vez. Que es lo que estoy tratando de evitar.

Entonces, cómo quiero que funcione este código: cada elemento de la matriz se desvanece, en una posición aleatoria, luego se desvanece y se desvanece nuevamente en otra posición aleatoria.

Me encantaría cualquier sugerencia o ayuda, estoy tratando de evitar usar jQuery también porque sé que normalmente no se usa en reaccionar.

No he intentado usar ninguna biblioteca.

Estoy escribiendo en un archivo de reacción mecanografiado.

¡Gracias!