如何解决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 举报,一经查实,本站将立刻删除。