Quiero agregar la animación deslizante a los elementos cuando el usuario se desplaza sobre el cuadro.
Inicialmente, se muestra un ícono de hamburguesa (color negro). A medida que el usuario se desplaza sobre el cuadro, quiero agregar una animación deslizante de derecha a izquierda y el color debe cambiar a verde. Y a medida que el usuario sale del div , la animación debería deslizarse de izquierda a derecha y el elemento debería volver a su estado predeterminado.
¿Cómo puedo lograr esto usando CSS?
Zona de pruebas de código: https://codesandbox.io/s/focused-burnell-k5om1v
App.jsx
import React from "react"; import "./styles.css"; import { ReactComponent as Burger } from "./burger.svg"; import { ReactComponent as Fries } from "./fries.svg"; export default function App() { const [isShown, setIsShown] = React.useState(false); return ( <div className="container" onMouseEnter={() => setIsShown(true)} onMouseLeave={() => setIsShown(false)} > {isShown ? ( <div className="box"> <Burger fill="green" width="100px" height="100px" /> <div> Menu </div> <Fries width="100px" height="100px" /> </div> ) : ( <div className="box"> <Burger width="100px" height="100px" /> </div> )} </div> ); } style.css
.container { border: 2px solid black; width: 500px; height: 120px; } .box { display: flex; justify-content: flex-end; align-items: center; }Hay algunos problemas con App.js y styles.css .
Si simplemente desea mostrar u ocultar elementos al pasar el mouse, sería mucho mejor hacerlo con CSS ( opacity: 0 y transición a la opacity: 1 al pasar el mouse) ya que esto ayudaría a introducir menos errores y problemas con el tiempo mientras que el componente podría todavía estar renderizando por ejemplo.
Tenga en cuenta que hacer esto a través de ReactJS solo mostraría el elemento del icono SVG inmediatamente, sin transición.
Para deslizar el elemento del icono oculto, usaríamos las propiedades de posicionamiento del elemento en diferentes estados (normal y flotante) con un efecto de transición aplicado.
Entonces, modifiqué tu App.js para:
Aplicación.js:
export default function App() { return ( <div className="container"> <div className="box"> <div className="first-icon-box"> <Burger fill="green" width="100px" height="100px" /> </div> <div> Menu </div> <div class="second-icon-box"> <Fries width="100px" height="100px" /> </div> </div> </div> ); } Envolví cada elemento SVG en un <div> para que sea más fácil identificarlos en el CSS.
estilos.css:
Usaremos posicionamiento absoluto, y para que esto funcione, necesitamos establecer position: relative en .container .
A continuación, la propiedad de transition debe establecerse solo en el estado normal del elemento del icono , no en los estados normal y flotante.
El elemento comenzará desde la ubicación más a la derecha de .container así que a right: 0px . Oculto inicialmente, por lo que la opacity: 0 y la transition se establecen en todas las propiedades. Esos valores luego se cambian en .box:hover .
.container { position: relative; ... } .box { display: flex; justify-content: flex-end; align-items: center; cursor: pointer; } .first-icon-box { position: absolute; right: 0px; opacity: 0; transition: all 0.55s ease-in-out; } .box:hover .first-icon-box { right: 140px; opacity: 1; }También puede ver esta respuesta en una caja de arena aquí: Animación CSS deslizante al pasar el mouse en el elemento React .