问题描述
我正在尝试添加一个下拉菜单,它会慢慢地显示菜单项。我正在使用 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 (将#修改为@)