如何转换/动画与脉轮-UI？

Question

开始使用chakra，目前为止我真的很喜欢它，但是我很难找到如何做一个简单的动画。

我有一个图像，我想增加它的大小，onClick。

我简要地看了一下framer-motion，但是对于我所需要的，它似乎有点过分了。

无论如何，我都试过了，在尝试使用类型记录定义motionBox时，一直会遇到一个错误：

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

const MotionBox = motion < BoxProps > Box;

错误：

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)

有什么简单的方法可以用脉轮动画吗？还是我应该试着用框架来找出我的错误？

Answer 1

我想出了一个使用state的解决方案:虽然它不是技术上的动画，但它可以满足我的需要。

(我还让framer工作，创建自定义的运动组件，但使用JS而不是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()}
              />

Answer 2

transition="all .25s ease“_hover={ transform：'scale(1.33)'，过滤器：”亮度(120%)“，}