Estoy tratando de hacer una presentación de diapositivas aleatoria usando ganchos de reacción y un intervalo establecido. ¿Cómo puedo hacer una transición/animación entre las imágenes?
¡gracias!
const imgArray = [img1, img2,img3,img4] const [slideImg, setSlideImg] = useState(imgArray[utilService.getRandIntInclusive(0, imgArray.length - 1)]) useEffect(() => { const intervalId = setInterval(() => { setSlideImg(imgArray[utilService.getRandIntInclusive(0, imgArray.length - 1)]) }, 3000) return function cleanup() { clearInterval(intervalId) } }) return ( <section className='filter flex'> <img src={slideImg} alt="" ></img> </section >) }Puede agregar estilos de transición a la sección.
Ejemplo
.flex { position:relative; height:281px; width:450px; margin:0 auto; } .flex img { position:absolute; left:0; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } .flex img.top:hover { opacity:0; }