React Bootstrap导航栏折叠关闭时无动画的问题修复求助

我最近在用React+Bootstrap做一个响应式导航栏，想要在屏幕宽度小于992px的时候显示切换图标来展开/收起菜单。目前展开的时候动画是正常的，但关闭的时候菜单直接就“跳没了”，完全没有过渡动画效果。我试了好几种调整方法，也搜了不少资料，就是找不到问题出在哪，想请教各位怎么修复这个折叠关闭时的动画问题。

另外补充下我的设计需求：导航栏初始加载时会有从上方滑入的背景动画，导航链接会延迟1秒显示；我希望关闭的时候能有相反的效果——先让链接淡出，然后导航栏背景再平滑滑回去。

下面是我的代码：

MyNavbar.tsx #

import { Container, Image, Nav, Navbar } from "react-bootstrap";
import logo from "../assets/Logo-Rifugio-Mamo.jpg";
import { useEffect, useState } from "react";

const MyNavbar = () => {
  const [scrolling, setScrolling] = useState(false);

  useEffect(() => {
    window.addEventListener("scroll", handleScroll);
  }, []);

  const handleScroll = () => {
    if (window.scrollY > 850) {
      setScrolling(true);
    } else {
      setScrolling(false);
    }
  };

  return (
    // TODO - Collegare i link alle rispettive pagine una volta create.
    <>
      <Navbar expand="lg" className={`my-nav fixed-top ${scrolling ? "scrolled-navbar" : ""}`}>
        <Container>
          <Image src={logo} className="logo d-lg-none m-auto" />
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="ms-auto">
              <Nav.Link href="#home">Il Rifugio</Nav.Link>
              <Nav.Link href="#link">Il C.R.A.S.</Nav.Link>
              <Nav.Link href="#link">News</Nav.Link>
              <Nav.Link href="#link">Blog</Nav.Link>
            </Nav>
            <Image src={logo} alt="logo" className="logo mx-5 d-none d-lg-block" />
            <Nav className="me-auto">
              <Nav.Link href="#link">FAQ</Nav.Link>
              <Nav.Link href="#link">Donazioni</Nav.Link>
              <Nav.Link href="#link">Volontariato</Nav.Link>
              <Nav.Link href="#link">Visite</Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
    </>
  );
};

export default MyNavbar;

自定义折叠相关CSS #

.logo {
  max-width: 120px;
  max-height: 100px;
}

.my-nav {
  padding-block: 1rem;
  transition: all 1s ease-in-out;
  background-color: rgba(89, 141, 89, 0.5);
}

.my-nav .nav-link {
  color: white;
  font-size: 18px;
}

.my-nav .nav-link:hover {
  color: rgb(136, 241, 136);
}

@media screen and (max-width: 992px) {
  .my-nav .navbar-collapse .nav-link {
    opacity: 0;
    transition: opacity 1s 1s linear;
  }
}

.navbar-collapse {
  transition: height 0.8s linear;
}

.navbar-collapse.collapse.show {
  height: 340px;
}

.navbar-collapse.collapse.show .nav-link {
  opacity: 1;
}

.navbar-collapse.collapse.show .nav-link:focus {
  outline: none;
}

.navbar-toggler:focus, .navbar-toggler:active {
  outline: none;
  box-shadow: none;
}

有没有大佬能帮我看看问题出在哪？怎么调整才能让关闭的时候也有平滑的动画效果呀？

内容来源于stack exchange