悬停侧边栏时不应用动画

Question

我用脉轮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>

Answer 1

您还需要向主 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"}
    >...

悬停侧边栏时不应用动画

Animation is not applied when hovering sidebar

css

reactjs

sass

chakra-ui