悬停侧边栏时不应用动画
Animation is not applied when hovering sidebar
我用脉轮ui。
当我将鼠标悬停在侧边栏上时,侧边栏会向右延伸。
我正在使用过渡,但未应用动画。有点乱。
我正在使用 transition="all 0.3s" 但在应用悬停时没有动画发生。
我不知道why.If谁能帮我理解,我会很感激你的帮助。
代码
enter link description here
<Flex
background="blue.50"
flexDirection="column"
height="100vh"
justifyContent="space-between"
onMouseEnter={() => setState((prevState) => !prevState)}
onMouseLeave={() => setState((prevState) => !prevState)}
position="fixed"
width={state ? "204px" : "54px"}
zIndex={10}
>
<Box transition="all 0.3s">
<HStack p={3}>
<Flex alignItems="center">
<Image
display={state ? "none" : "inline-block"}
height="24px"
src={""}
transition="all 0.3s ease-in-out"
/>
<Image
display={state ? "inline-block" : "none"}
src={"chakra_logo.png"}
/>
</Flex>
<Text display={state ? "inline-block" : "none"} fontSize="xs">
logo
</Text>
</HStack>
<VStack mt={3} spacing={0}>
<Box _hover={{ backgroundColor: "gray.200" }} width="full">
<Link>
<a>
<HStack p={3}>
<BiSearchAlt />
<Text display={state ? "inline-block" : "none"} fontSize="sm">
search
</Text>
</HStack>
</a>
</Link>
</Box>
<Box _hover={{ backgroundColor: "gray.200" }} width="full">
<Link>
<a>
<HStack p={3}>
<AiOutlineSetting />
<Text display={state ? "inline-block" : "none"} fontSize="sm">
setting
</Text>
</HStack>
</a>
</Link>
</Box>
</VStack>
</Box>
<VStack mb={2} spacing={0}>
<Box mb={2} px={3} width="full">
<Divider borderColor="gray.300" />
</Box>
<Box _hover={{ backgroundColor: "gray.200" }} p={3} width="full">
<HStack>
<Image
alt="MyImage"
src={""}
width="24px"
/>
</HStack>
</Box>
</VStack>
</Flex>
您还需要向主 Flex 添加 CSS 过渡:
<Flex
background="blue.50"
flexDirection="column"
height="100vh"
justifyContent="space-between"
onMouseEnter={() => setState((prevState) => !prevState)}
onMouseLeave={() => setState((prevState) => !prevState)}
position="fixed"
width={state ? "204px" : "54px"}
zIndex={10}
transition={"all .2s ease"}
>...
我用脉轮ui。
当我将鼠标悬停在侧边栏上时,侧边栏会向右延伸。
我正在使用过渡,但未应用动画。有点乱。
我正在使用 transition="all 0.3s" 但在应用悬停时没有动画发生。
我不知道why.If谁能帮我理解,我会很感激你的帮助。
代码 enter link description here
<Flex
background="blue.50"
flexDirection="column"
height="100vh"
justifyContent="space-between"
onMouseEnter={() => setState((prevState) => !prevState)}
onMouseLeave={() => setState((prevState) => !prevState)}
position="fixed"
width={state ? "204px" : "54px"}
zIndex={10}
>
<Box transition="all 0.3s">
<HStack p={3}>
<Flex alignItems="center">
<Image
display={state ? "none" : "inline-block"}
height="24px"
src={""}
transition="all 0.3s ease-in-out"
/>
<Image
display={state ? "inline-block" : "none"}
src={"chakra_logo.png"}
/>
</Flex>
<Text display={state ? "inline-block" : "none"} fontSize="xs">
logo
</Text>
</HStack>
<VStack mt={3} spacing={0}>
<Box _hover={{ backgroundColor: "gray.200" }} width="full">
<Link>
<a>
<HStack p={3}>
<BiSearchAlt />
<Text display={state ? "inline-block" : "none"} fontSize="sm">
search
</Text>
</HStack>
</a>
</Link>
</Box>
<Box _hover={{ backgroundColor: "gray.200" }} width="full">
<Link>
<a>
<HStack p={3}>
<AiOutlineSetting />
<Text display={state ? "inline-block" : "none"} fontSize="sm">
setting
</Text>
</HStack>
</a>
</Link>
</Box>
</VStack>
</Box>
<VStack mb={2} spacing={0}>
<Box mb={2} px={3} width="full">
<Divider borderColor="gray.300" />
</Box>
<Box _hover={{ backgroundColor: "gray.200" }} p={3} width="full">
<HStack>
<Image
alt="MyImage"
src={""}
width="24px"
/>
</HStack>
</Box>
</VStack>
</Flex>
您还需要向主 Flex 添加 CSS 过渡:
<Flex
background="blue.50"
flexDirection="column"
height="100vh"
justifyContent="space-between"
onMouseEnter={() => setState((prevState) => !prevState)}
onMouseLeave={() => setState((prevState) => !prevState)}
position="fixed"
width={state ? "204px" : "54px"}
zIndex={10}
transition={"all .2s ease"}
>...