Reactjs显示带有动画的边栏菜单

Question

我需要一些见解。我试着用一个动画构建一个侧边栏菜单，当状态为真时，它将从左100%到100%全屏显示，而当状态为假时，它从100%全屏到左100%关闭。

当状态为true时，动画可以工作，但当关闭侧边栏菜单时，动画不工作。

顺便说一句，如果这个模式有更好的方法，请告诉我。提前谢谢！

const PhoneNavigation = ({ handleClose, open }) => {
return (
<nav className={open ? "show_side_bar" : "close_side_bar"}>
<span onClick={handleClose}>X</span>
<ul>
<li className="subMenu navItem">
<a href="/">Courses</a>
</li>
<li className="navItem">
<a href="/">Pricing</a>
</li>
<li className="navItem">
<a href="/">Mission</a>
</li>
<li className="subMenu navItem">
<a href="/">About us</a>
</li>
</ul>
</nav>
);
};
export default PhoneNavigation;

//样式表

.show_side_bar {
position: fixed;
background-color: brown;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99;
animation: showMenu 2s;
}
.close_side_bar {
animation: showMenu 2s reverse;
}
@keyframes showMenu {
from {
left: -100%;
}
to {
left: 0%;
}
}

Answer 1

这对关闭侧边栏无效，因为动画仅应用于元素的条目。相反，您可以使用这样的转换：

const PhoneNavigation = ({ handleClose, open }) => {
return (
// when open is true, there will be an additional class show_side_bar
<nav className={open ? "show_side_bar side_bar" : "side_bar"}>
<span onClick={handleClose}>X</span>
<ul>
<li className="subMenu navItem">
<a href="/">Courses</a>
</li>
<li className="navItem">
<a href="/">Pricing</a>
</li>
<li className="navItem">
<a href="/">Mission</a>
</li>
<li className="subMenu navItem">
<a href="/">About us</a>
</li>
</ul>
</nav>
);
};
export default PhoneNavigation;

以下CSS将使其发挥作用：

.side_bar {
position: fixed;
background-color: brown;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99;
// transition applies to every render, i.e., adding and removing any class from 
// the element
transition : all 2s ease;
// place it initially at -100%
transform : translate(-100%);
}
.show_side_bar {
// when this class is active, sidebar will be visible
transform : translate(0);
}