Блог

Начал использовать chakra-ui, и до сих пор мне это очень нравится, но я изо всех сил пытаюсь понять, как сделать простую анимацию.

У меня есть изображение, которое я хочу увеличить по клику.

Я бегло просмотрел, framer-motion но это кажется немного излишним для того, что мне нужно.

Я все равно попробовал и все время получал ошибку при попытке определить motionBox с помощью typescript:

 import { Flex, Container, HStack, Box, BoxProps } from "@chakra-ui/react"; import { motion } from "framer-motion";  const MotionBox = motion lt; BoxProps gt; Box;  

ошибки:

Operator 'gt;' cannot be applied to types 'boolean' and 'ChakraComponentlt;"div", {}gt;'.ts(2365)

'BoxProps' only refers to a type, but is being used as a value here.ts(2693)

Есть ли простой способ оживить чакру? или я должен просто попытаться разобраться в своих ошибках с помощью фреймера?

Я придумал решение с использованием состояния: хотя оно технически не анимировано, оно делает то, что мне нужно.

(Я также заставил фреймворк работать, создавая пользовательский компонент движения, но используя JS, а не TS)

 const [size, setSize] = useState("20vh");   const toggleSize = () =gt; {  if (size === "20vh") {  setSize("50vh");  } else {  setSize("20vh");  }  };  

 lt;Image  p="5px"  alt={product.id}  src={product.img[1]}  w={size}  maxH="50vh"  m="auto"  borderRadius="10px"  onClick={() =gt; toggleSize()}  /gt;