Empecé a usar chakra-ui, y hasta ahora me encanta, pero estoy luchando por descubrir cómo hacer una animación simple.
Tengo una imagen que quiero aumentar su tamaño onClick.
He mirado brevemente el framer-motion pero parece un poco excesivo para lo que necesito.
Lo intenté de todos modos y seguí recibiendo un error al intentar definir motionBox con mecanografiado:
import { Flex, Container, HStack, Box, BoxProps } from "@chakra-ui/react"; import { motion } from "framer-motion"; const MotionBox = motion < BoxProps > Box;errores:
Operator '>' cannot be applied to types 'boolean' and 'ChakraComponent<"div", {}>'.ts(2365)
'BoxProps' only refers to a type, but is being used as a value here.ts(2693)
¿Hay una forma sencilla de animar con chakra? ¿O debería tratar de averiguar mis errores con Framer?
Descubrí una solución usando el estado: aunque técnicamente no está animado, hace lo que necesito.
(También hice que el enmarcador funcionara, creando un componente de movimiento personalizado, pero usando JS, no TS)
const [size, setSize] = useState("20vh"); const toggleSize = () => { if (size === "20vh") { setSize("50vh"); } else { setSize("20vh"); } }; <Image p="5px" alt={product.id} src={product.img[1]} w={size} maxH="50vh" m="auto" borderRadius="10px" onClick={() => toggleSize()} />