如何在 ChakraUI 中向 Flex box 添加过渡

问：

我正在尝试制作一个餐厅网站。目前，我正在尝试创建一个隐藏的导航栏，该导航栏在滚动经过窗口屏幕上的某个 y 坐标后从顶部滑入。我想让导航栏作为过渡轻松，但是，当我尝试将其作为过渡道具传递给我的 Flex 时，它不起作用。

这是我的hiddenNavbar组件的代码。

export default function HiddenNavbar() {

    const fontStyle = {
        fontSize: {base: '1.5rem', lg: '3rem'},
        fontWeight: 'bold',
        maxH: 'full',
        _hover: {
          color: "brand.800",
        }}

    return (

          <Flex 
              bg='black' 
              padding='1.5rem' 
              width='full' 
              justify='space-evenly'
              position='fixed' 
              zIndex='1'
              transition='all 0.5s ease-in'
              >
              
              <Link 
              sx={fontStyle} style={{ textDecoration: "none" }} 
              href='#menu-section'
            >MENU</Link>

              <Link 
              sx={fontStyle} 
              style={{ textDecoration: "none" }} 
              href='#hero-meta'
            >LOCATION</Link>

            <Link 
              sx={fontStyle} 
              style={{ textDecoration: "none" }} 
              href='#hero-meta'
              >HOURS</Link>

              <Link 
              sx={fontStyle} 
              style={{ textDecoration: "none" }} 
              
              href="https://www.latimes.com/socal/glendale-news-press/tn-gnp-et-0521-dining-20160524-story.html"
            >PRESS</Link>
              
          </Flex>
  ) 
}

这是我的 heroSection 组件，它呈现了我的 hiddenNavbar 组件。

export default function HeroSection() {
  const [showNav, setShowNav] = useState(false);
  const scrollBreakpoint = 500;

  function setShowNavbar() {
    if (window.scrollY >= scrollBreakpoint) {
      setShowNav(true)
    } 
  }

  function hideNavbar() {
    if (window.scrollY < scrollBreakpoint) {
      setShowNav(false)
    }
  }

  window.addEventListener("scroll", setShowNavbar)
  window.addEventListener("scroll", hideNavbar)

  return (
      <Box 
        style={{backgroundSize: 'cover'}} 
        color='white' 
        width='full' 
        bg='black' 
        bgImage="url('/images/pho-image.png')" 
        bgRepeat="no-repeat" 
        bgPosition="center" 
        >
          
        {showNav ? <HiddenNavbar /> : null}
        
        <Container as='section' p={5} maxW={{base: '90vw', xl: '80vw'}} pb={20}>
              <Header/>
              <MenuNavbar/>
              <Divider borderWidth={1} borderColor='brand.700'/>
              <HeroMeta /> 
        </Container>
      </Box>
  )
}