我有以下示例代码片段（我正在使用React，但不想在这里发布之前花时间清理实际的项目代码）：
null
let menuOpened = false;
document.getElementById('menu-button')
.addEventListener('click', function() {
menuOpened = !menuOpened;
document.getElementById('body').classList.toggle('menu-opened', menuOpened);
document.getElementById('menu').classList.toggle('menu-opened', menuOpened);
});* {
box-sizing: border-box;
}
body {
margin: 0;
}
body.menu-opened {
overflow-y: hidden;
}
body > * {
width: 100vw;
}
header {
background-color: #6FC5C2;
display: flex;
height: 20vh;
position: sticky;
top: 0;
align-items: center;
justify-content: center;
}
nav {
background-color: #80CAF1;
display: flex;
height: 80vh;
left: 0;
opacity: 0;
padding: 1rem;
position: fixed;
top: 20vh;
transition: all 0.35s ease;
visibility: hidden;
z-index: 20;
align-items: center;
flex-direction: column;
justify-content: center;
}
nav.menu-opened {
opacity: 1;
visibility: visible;
}
a {
color: black;
font-weight: bold;
text-decoration: none;
}
a:not(:last-child) {
margin-bottom: 0.5rem;
}
main {
display: flex;
}
aside {
background-color: #9C9ECF;
display: flex;
flex-basis: 25%;
padding: 3rem 0.5rem;
text-align: center;
justify-content: center;
}
section {
background-color: #F8CFD7;
display: flex;
flex-basis: 75%;
padding: 2rem;
align-items: stretch;
flex-direction: column;
}
article {
border: ridge #80CAF1;
border-width: 3px 3px 0 3px;
display: flex;
font-size: 0.75rem;
min-height: 15vh;
padding: 1rem;
align-items: center;
}
article:last-child {
border-width: 3px;
}
footer {
background-color: #016CBA;
height: 30vh;
}<body id="body">
<header>
<button id="menu-button" type="button">Menu</button>
</header>
<nav id="menu">
<a href="/">Link 1</a>
<a href="/">Link 2</a>
</nav>
<main id="main">
<aside>Filter Form</aside>
<section>
<article>Article A</article>
<article>Article B</article>
<article>Article C</article>
<article>Article D</article>
<article>Article E</article>
<article>Article F</article>
<article>Article G</article>
<article>Article H</article>
<article>Article I</article>
</section>
</main>
<footer id="footer"></footer>
</body>null
当前，当我点击按钮打开导航菜单时，页面将禁用滚动，菜单将淡入。当我再次单击该按钮时，滚动将重新启用，菜单将淡出。
我实际上想要的是一个擦拭过渡而不是褪色，像这样：
使用上图作为类比，主页面内容将是A，而菜单将是B。但是，我想要的擦拭不是水平的，而是垂直的，即当我打开菜单时，擦拭将从上到下，当我关闭菜单时，擦拭将从下到上。菜单文本不应移动。我想使用与当前配置相同的转换持续时间和定时功能。
这在不使用JavaScript/React的情况下是可能的吗？
现在，您将它与可见性一起使用是吗？别用！
使用height:0；，然后当您想在js中打开它时，将其转换为height:100%或其他大小。
并使用transition:height.5s；作为动画打开。
