悬停侧边栏时不应用动画

Question

我使用脉轮UI。
当我将侧边栏悬停时，侧边栏向右延伸。 我正在使用过渡，但没有应用动画。有点不稳。
我正在使用transition =“所有0.3s”，但是当应用悬停时不会发生动画。
我不知道为什么。如果有人可以帮助我理解，我将感谢您的帮助。

代码 在此处输入链接说明

    <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>

Answer 1

您还需要将CSS过渡添加到Main Flex：

<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"}
    >...