admin管理员组

文章数量:1279087

Started using chakra-ui, and really loving it so far, but I'm struggling to figure out how to do a simple animation.

I have an image that i want to increase it's size onClick.

I've briefly looked at framer-motion but it seems a bit overkill for what i need.

I tried it anyways and kept getting an error when trying to define motionBox with typescript:

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

const MotionBox = motion < BoxProps > Box;

errors:

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)

Is there a simple way to animate with chakra? or should i just try to figure out my errors with framer?

Started using chakra-ui, and really loving it so far, but I'm struggling to figure out how to do a simple animation.

I have an image that i want to increase it's size onClick.

I've briefly looked at framer-motion but it seems a bit overkill for what i need.

I tried it anyways and kept getting an error when trying to define motionBox with typescript:

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

const MotionBox = motion < BoxProps > Box;

errors:

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)

Is there a simple way to animate with chakra? or should i just try to figure out my errors with framer?

• javascript
• typescript
• chakra-ui

Share Improve this question Follow asked Dec 6, 2021 at 10:48 Liiaam93Liiaam93 28522 gold badges33 silver badges1717 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

I found the answer at https://blog.logrocket./advanced-techniques-chakra-ui/#animations

All credits go to the blog post author Nefe James and where else it is due.

Here's the transcript:

Animations

You can define animations using Chakra UI’s keyframes helper. keyframes takes in a CSS keyframe definition and returns an object you can use in styles:

import { Box, Button, Center, VStack, keyframes } from "@chakra-ui/react"; 
import { LightBulb } from "svgs";

const spin = keyframes`  
  from {transform: rotate(0deg);}   
  to {transform: rotate(360deg)} 
`;

export default function Transition() {   
  const spinAnimation = `${spin} infinite 2s linear`;   
  return (
    <Center>
      <VStack spacing={20}>
        <Box animation={spinAnimation}>
          <LightBulb />
        </Box>
      </VStack>
    </Center>   
 ); 
} 

Above, we set up a spin animation with the keyframes helper. We can add animations to Chakra UI elements through the animation prop.

Next, we pass spinAnimation to the Box ponent in order to add animations to our applications using Chakra UI.

I figured out a solution using state: Whilst it's not technically animated, it does what i need.

(I also got framer working, creating a custom motion ponent, but using JS not 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()}
              />

transition="all .25s ease" _hover={{ transform: 'scale(1.33)', filter: "brightness(120%)", }}

本文标签： javascriptHow to transformanimate with ChakraUIStack Overflow