React - 向下滑动菜单显示悬停时的菜单项

问题描述

我正在尝试添加一个下拉菜单，它会慢慢地显示菜单项。我正在使用 Csstransition 的 react-transition-group。我有蓝色背景做我想要的漂亮的缓慢下滑。但是文本项会立即显示。这是我的代码和框显示问题：https://codesandbox.io/s/compassionate-dawn-zbmt5

我的导航栏组件：

import { Link } from "react-router-dom";
import React,{ useState } from "react";
import { Csstransition } from "react-transition-group";

const Navbar = () => {
  const [showSchedDropdown,setShowSchedDropdown] = useState(false);

  return (
    <ul className={"nav"}>
      <li
        className={"nav-item dropdown"}
        onMouseEnter={() => setShowSchedDropdown(true)}
        onMouseLeave={() => setShowSchedDropdown(false)}
      >
        <button
          className={"nav-link dropdown-toggle"}
          aria-haspopup={"true"}
          aria-expanded={"false"}
          onClick={() => setShowSchedDropdown(true)}
        >
          Dropdown Menu
        </button>
        <Csstransition
          in={showSchedDropdown}
          timeout={1300}
          classNames={"hidden-menu"}
        >
          <div className={"dropdown-menu"}>
            {showSchedDropdown && (
              <>
                <Link
                  className={"dropdown-item"}
                  to={"/baglines"}
                  onClick={() => setShowSchedDropdown(false)}
                >
                  Menu Item 1
                </Link>
                <Link
                  className={"dropdown-item"}
                  to={"/totelines"}
                  onClick={() => setShowSchedDropdown(false)}
                >
                  Menu Item 2
                </Link>
                <Link
                  className={"dropdown-item"}
                  to={"/otherlines"}
                  onClick={() => setShowSchedDropdown(false)}
                >
                  Menu Item 3
                </Link>
              </>
            )}
          </div>
        </Csstransition>
      </li>
    </ul>
  );
};

export default Navbar;

和 CSS：

.dropdown-menu {
  display: block;
  margin-top: 0;
  padding-top: 0;
  color: #ffffff;
  background-color: rgba(#265077,1);
  font-size: 0.9rem;
  border: none;
  transition: height 1.3s ease;

  &.hidden-menu-enter,&.hidden-menu-exit-done {
    height: 0;
    transition: height 1.3s ease;
  }

  &.hidden-menu-enter-active {
    height: 100px;
    transition: height 1.3s ease;
  }

  &.hidden-menu-enter-done {
    height: 100px;
  }

  &.hidden-menu-leave {
    height: 0;
    transition: height 1.3s ease;
  }

  &.hidden-menu-leave-active {
    height: 100px;
    transition: height 1.3s ease;
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）