我们正在使用反应和打字稿。
设计库是 chakra-ui。
我们正在使用 framer-motion 进行动画制作。
我想做什么
我想创建原始单选按钮。RadioButton 行为
当用户悬停按钮 → 单选按钮变为蓝色(不显示对勾图标)。
当按下单选按钮 → 单选按钮变为蓝色,并显示对勾图标(帧中实现的动画-应用了运动。)
当前单选按钮行为
当按钮悬停时 → 颜色不会变为蓝色。
当单选按钮被按下时 → framer-motion 实现的动画不会应用于复选图标。
如果有人可以帮助我,请回答。
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>
</>
);
};