• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

219
Views
¿Cómo transformar/animar con Chakra-UI?

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?

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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()} />
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error