如何使用 Chakra-UI 轉換/動畫？

Question

開始使用 chakra-ui，到目前為止真的很喜歡它，但我正在努力弄清楚如何做一個簡單的 animation。

我有一個圖像，我想增加它的大小 onClick。

我已經簡要地查看了framer-motion ，但對於我需要的東西來說似乎有點矯枉過正。

無論如何我都嘗試過，但在嘗試使用 typescript 定義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 的解決方案：雖然它在技術上不是動畫的，但它可以滿足我的需要。

（我也讓成幀器工作，創建自定義運動組件，但使用 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)', filter: "brightness(120%)", }}