我想创建一个带有框架运动的自定义radioButton。

Question

我们使用的是反应和类型记录。

设计库是chakra。

我们正在使用框架-运动动画。

我想做什么

我想要创建原始单选按钮。RadioButton行为

当用户悬停按钮→时，单选按钮变成蓝色(没有显示检查图标)。

当单选按钮按下→时，单选按钮变成蓝色，并显示检查图标(应用框架运动实现的动画)。

当前单选按钮行为

当按钮在→上悬停时，颜色不会改变为蓝色。

当单选按钮按下→时，由框架运动实现的动画不会应用到检查图标上。

如果有人能帮我，请回答。

import React from 'react';
import { Center, VStack, HStack } from '@chakra-ui/layout';
import { Radio } from 'components/Radio';
import { useRadioGroup } from '@chakra-ui/radio';

export const Index: React.FunctionComponent = () => {
  const options = ['1', '2', '3'];
  const { getRootProps, getRadioProps } = useRadioGroup({
    name: 'framework',
    defaultValue: 'react',
    onChange: console.log,
  });
  const group = getRootProps();
  return (
    <Center paddingX={4}>
        <HStack {...group} gridGap={12}>
          {options.map((value) => {
            const radio = getRadioProps({ value });
            return <Radio key={value} {...radio}></Radio>;
          })}
        </HStack>
    </Center>
  );
};

import { useState } from 'react';
import { RadioProps, useRadio } from '@chakra-ui/radio';
import { Icon,Box } from '@chakra-ui/react';
import { motion, useMotionValue, HTMLMotionProps } from 'framer-motion';
import { HTMLChakraProps, chakra } from '@chakra-ui/react';
type Merge<P, T> = Omit<P, keyof T> & T;
type MotionBoxProps = Merge<HTMLChakraProps<'div'>, HTMLMotionProps<'div'>>;

export const MotionBox: React.FC<MotionBoxProps> = motion(chakra.div);

export const Radio: React.FunctionComponent<RadioProps> = (props) => {
  const { getInputProps, getCheckboxProps } = useRadio(props);

  const input = getInputProps();
  const checkbox = getCheckboxProps();
  const [isChecked, setIsChecked] = useState(false);
  return (
    <>
      <MotionBox
        position="relative"
        as="label"
        whileTap={{
          scale: 0.95,
          borderRadius: '100%',
        }}
        whileHover={{
          scale: 1.05,
        }}
        onTap={() => setIsChecked(!isChecked)}
      >
        <input {...input} />
        <Box
          {...checkbox}
          cursor="pointer"
          borderWidth="1px"
          borderRadius="100%"
          boxShadow="md"
          _checked={{
            bg: 'blue.100',
            color: 'white',
            borderColor: 'blue.100',
          }}
          _focus={{
            boxShadow: 'outline',
          }}
          _hover={{
            background: 'blue.100',
          }}
          px={7}
          py={7}
        >
          {props.children}
        </Box>
        <MotionBox
          position="absolute"
          top={3}
          left={3}
          style={{
            originX: 0,
            originY: 1,
          }}
          initial={{ opacity: 0, scale: 0.1 }}
          animate={{
            opacity: 1,
            scale: 1,
          }}
          transition={{
            duration: 3,
          }}
        >
          <Icon fontSize={'35px'}>
            <path
              d="M9.07903 14.9692L6.17405 12.1096C5.67622 11.6195 4.8712 11.6195 4.37337 12.1096C3.87554 12.5997 3.87554 13.3921 4.37337 13.8822L8.18311 17.6325C8.68094 18.1225 9.48597 18.1225 9.98379 17.6325L19.6266 8.14012C20.1245 7.65006 20.1245 6.8576 19.6266 6.36754C19.1288 5.87749 18.3238 5.87749 17.8259 6.36754L9.07903 14.9692Z"
              fill="#ffffff"
              strokeWidth="0.5"
              stroke="#ffffff"
            />
          </Icon>
        </MotionBox>
      </MotionBox>
    </>
  );
};

Answer 1

您需要使用motion.div将您的代码重新定位到它。

例如，要更改背景色。

<div className="App">
  <motion.div  whileHover={{ backgroundColor: 'rgb(100,0,0)' }} style={{ backgroundColor: 'rgb(255,0,0)'}}>
    Hover Me
  </motion.div>
</div>

如果使用以下方式，div背景将发生更改，但除非u设置样式{{backgroundColor：“继承”}}，否则不会影响按钮的背景。

// following button background won't change color

<div className="App">
  <motion.div  whileHover={{ backgroundColor: 'rgb(100,0,0)' }} style={{ backgroundColor: 'rgb(255,0,0)'}}>
    <button>I am a button</button>
  </motion.div>
</div>

//following background of button will change color

<div className="App">
  <motion.div  whileHover={{ backgroundColor: 'rgb(100,0,0)' }} style={{ backgroundColor: 'rgb(255,0,0)'}}>
    <button style={{ backgroundColor: 'inherit' }}>I am a button</button>
  </motion.div>
</div>

简单示例https://codesandbox.io/s/cocky-kapitsa-nl5bs

对于SVG来说，这是一回事。

 <motion.svg initial={{.... }} animate={{ ..... }} whileHover={{ ..... }}>
     <path d="M9.07903 14.9692L6.17405 12.1096C5.67622 11.6195 4.8712 11.6195 4.37337 12.1096C3.87554 12.5997 3.87554 13.3921 4.37337 13.8822L8.18311 17.6325C8.68094 18.1225 9.48597 18.1225 9.98379 17.6325L19.6266 8.14012C20.1245 7.65006 20.1245 6.8576 19.6266 6.36754C19.1288 5.87749 18.3238 5.87749 17.8259 6.36754L9.07903 14.9692Z"
     fill="#ffffff"
     strokeWidth="0.5"
     stroke="#ffffff"
     />
   </motion.svg>

如果您想要动画单个路径，则需要将其转换为motion.path

<motion.svg initial={{.... }} animate={{ ..... }} whileHover={{ ..... }}>
     <motion.path d="M9.07903 14.9692L6.17405 12.1096C5.67622 11.6195 4.8712 11.6195 4.37337 12.1096C3.87554 12.5997 3.87554 13.3921 4.37337 13.8822L8.18311 17.6325C8.68094 18.1225 9.48597 18.1225 9.98379 17.6325L19.6266 8.14012C20.1245 7.65006 20.1245 6.8576 19.6266 6.36754C19.1288 5.87749 18.3238 5.87749 17.8259 6.36754L9.07903 14.9692Z"
      initial={{ opacity: 0 }}
      animate={{ fill: "#ffffff", opacity: 1 }}
      strokeWidth="0.5"
      stroke="#ffffff"
                />
 </motion.svg>