Me gustaría crear algún tipo de animación al pasar el mouse sobre mi galería usando ganchos de reacción, pero hasta ahora no he tenido éxito.
Explicación de la meta:
Me gustaría lograr que cuando paso el mouse sobre la imagen que tiene una superposición, primero mostrará el texto debajo de la imagen y, después de un tiempo, el texto desaparecerá y la imagen eliminará la superposición, básicamente se encenderá.
Lo que hice hasta ahora:
Creé una superposición en la imagen que desaparece al pasar el mouse con la ayuda de CSS.
<Col xs={6} className="img-wrap" onClick={() => setSelectedData(post)} onMouseEnter={handleMouseEnter} > <img src={post.image} alt="random" /> <div className="overlay"> <div className="text">{post.name}</div> </div> {hover && selectedData === post && <h1>HOVER </h1>} </Col>Y el CSS:
.img-wrap { position: relative; } image { display: block; width: 100%; height: auto; } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 210px; opacity: 0.5; transition: 0.5s ease; background-color: black; } .img-wrap:hover .overlay { opacity: 0; } .text { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } Esto funciona bien, pero los efectos de desplazamiento se activan inmediatamente en lugar del tiempo que deseo y el texto no se muestra al pasar el mouse sino al onClick .
Creo que lo mejor es usar la función setTime(), pero no estoy seguro de cómo conectarla con css.'
Aquí está mi caja de arena:
https://codesandbox.io/s/inspiring-poitras-5y3b1?file=/src/App.js
Eliminé onClick, coloqué setSelectedData en onMouseEnter, agregué un setTimeout allí y puse tu setHover en el tiempo de espera. Particularmente no me gusta usar setTimeouts, pero esta fue una forma rápida de hacer lo que estabas buscando.
<Col xs={6} className="img-wrap" onMouseEnter={() => { setSelectedData(post); setTimeout(() => { setHover(true); }, 1000); }} onMouseLeave={() => setHover(false)} >En el css, debemos perder el selector :hover psuedo y agregar una clase:
.img-wrap .overlay.fade { opacity: 0; }Luego, en la superposición, debemos hacer que la clase de atenuación sea condicional:
<div className={"overlay" + (hover && post === selectedData ? " fade" : "")}>https://codesandbox.io/s/quizzical-mayer-0si2d?file=/src/App.js:506-731
O al animar la propiedad de opacidad css con un retraso, entonces no hay necesidad de tiempo de espera.
.img-wrap .overlay { opacity: 1; transition: opacity 2s linear 1s; // where 1s is your delay } img-wrap:hover .overlay { opacity: 0; transition: opacity 2s linear 1s; // where 1s is your delay }Más información sobre las propiedades de transición aquí: https://www.w3schools.com/css/css3_transitions.asp