0
160
ViewsEfecto de desvanecimiento de React Hooks en modal de onMouseLeave
Esto debería ser fácil para la mayoría. La ventana modal después de abrirse desde el botón (que se activa con onMouseEnter) necesita un efecto para desaparecer una vez que se activa onMouseLeave. el "cuadrado verde" modal no debe mover su posición en absoluto, sino que simplemente se desvanecerá una vez que se active onMouseLeave o setOpenFalse. Y sus estilos están en Tailwind CSS. Gracias de antemano 😀🐍🏴☠️
el sandbox está aquí: https://codesandbox.io/s/modal-transition-clicked-1egnp?file=/src/styles.css:0-191
import React from "react"; import classNames from "classnames"; import { useState, Fragment } from "react"; import { useBoolean } from "./hooks/useBoolean"; import "./styles.css"; export const Actions = ({ defaultSelected = "like" }) => { const [selected, setSelected] = useState(defaultSelected); const [isOpen, setOpenTrue, setOpenFalse] = useBoolean(); return ( <div className="relative rounded"> <button onMouseEnter={setOpenTrue} onMouseLeave={setOpenFalse} className={classNames("flex items-center gap-2 rounded px-2 py-1", { "": isOpen })} > {selected && <Fragment>open modal</Fragment>} {isOpen && ( <div className="absolute mt-20 left-0 flex justify-center items start h-12"> <div className="bg-green-700 w-24 h-36 shadow grid grid-flow-col px-2 py-1 gap-2 animate-mount"></div> </div> )} </button> </div> ); }; export default Actions; .animate-mount { animation: mount 0.4s linear; } @keyframes mount { 0% { opacity: 0; transform: translateY(50%); } 100% { opacity: 1; transform: translateY(0); } }1 answers
Answer question0
Es un poco microadministrado, pero podría agregar dos estados más para rastrear cuándo se ingresó y salió del elemento del botón.
- Establezca el modal abierto y el conjunto ingresado en la entrada del mouse, y en el mouse deje el conjunto ingresado falso, el conjunto salido verdadero, y luego configure un tiempo de espera para establecer posteriormente abierto y salido falso.
- Cree una animación
.animate-unmountque anime solo la opacidad.
La animación de desmontaje y setTimeout deben tener aproximadamente la misma duración.
estilos.css
.animate-mount { animation: mount 0.4s linear; } @keyframes mount { 0% { opacity: 0; transform: translateY(50%); } 100% { opacity: 1; transform: translateY(0); } } .animate-unmount { animation: unmount 0.5s ease-in-out; } @keyframes unmount { 0% { opacity: 1; } 100% { opacity: 0; } }Reacciones.js
export const Actions = ({ defaultSelected = "like" }) => { const [selected, setSelected] = useState(defaultSelected); const [isOpen, setOpenTrue, setOpenFalse] = useBoolean(); const [isEntered, setEnteredTrue, setEnteredFalse] = useBoolean(); const [isExited, setExitedTrue, setExitedFalse] = useBoolean(); return ( <div className="relative rounded"> <button onMouseEnter={() => { setOpenTrue(); setEnteredTrue(); }} onMouseLeave={() => { setEnteredFalse(); setExitedTrue(); setTimeout(() => { setOpenFalse(); setExitedFalse(); }, 500); }} className={classNames("flex items-center gap-2 rounded px-2 py-1", { "": isOpen })} > {selected && <Fragment>open modal</Fragment>} {isOpen && ( <div className="absolute mt-20 left-0 flex justify-center items start h-12"> <div className={classNames( "bg-green-700 w-24 h-36 shadow grid grid-flow-col px-2 py-1 gap-2", { "animate-mount": isEntered, "animate-unmount": isExited } )} ></div> </div> )} </button> </div> ); }; 