如何使用Chakra-UI实现变换及动画效果

一、framer-motion报错修复 #

你当前的写法在TSX环境中会被编译器将<、>识别为比较运算符，而非泛型声明，因此触发两个类型错误。
正确定义MotionBox的写法如下：

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

// 合并Chakra BoxProps和framer-motion的动画属性
type MotionBoxProps = BoxProps & HTMLMotionProps<"div">
const MotionBox = motion(Box) as React.FC<MotionBoxProps>

修复后就可以正常使用MotionBox的动画属性了。

二、更轻量的Chakra原生实现方案 #

你的需求仅为点击放大图片，无需引入framer-motion，用Chakra内置的过渡属性和状态控制即可实现，无额外依赖：

import { useState } from "react";
import { Image } from "@chakra-ui/react";

const DemoComponent = () => {
  // 控制图片放大状态
  const [isZoomed, setIsZoomed] = useState(false);

  return (
    <Image
      src="你的图片资源地址"
      alt="示例图片"
      cursor="pointer"
      onClick={() => setIsZoomed(!isZoomed)}
      // 控制缩放比例
      transform={isZoomed ? "scale(1.2)" : "scale(1)"}
      // 定义过渡动画时长和缓动函数
      transition="transform 0.25s ease-in-out"
      // 可额外添加其他联动动画属性，比如阴影、圆角等
      boxShadow={isZoomed ? "xl" : "none"}
    />
  )
}

这种方案完全满足简单动画需求，代码更简洁，也不会出现类型兼容问题，更适合你的使用场景。

内容的提问来源于stack exchange，提问作者Liiaam93