我可以使用CSS做一个擦除转换吗？
我有以下示例代码片段（我正在使用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的情况下是可能的吗？
共有1个答案
现在，您将它与可见性一起使用是吗？别用！
使用height:0；，然后当您想在js中打开它时，将其转换为height:100%或其他大小。
并使用transition:height.5s；作为动画打开。
-
问题内容： 以下是有效的枚举声明。 但是我可以用枚举类型覆盖抽象类吗？ SomeEnumClass.java OverrideingEnumClass.java 如果没有，为什么不呢？有什么好的选择？ 问题答案： 不，你不能；枚举类型全部扩展，并且是隐式的。枚举可以实现接口，也可以直接在有关的枚举类上声明相关方法。 （我确实看到了您想要的基本概念，它是一个mixin；也许Java 8接口在这方面会
-
问题内容： 我有一个表格，有两个按钮 我也使用jQuery UI的按钮，就像这样 但是，第一个按钮也会提交表单。我本以为，如果没有，它就不会。 显然我可以做到这一点 但是有没有办法可以在没有JavaScript干预的情况下阻止后退按钮提交表单？ 老实说，我只使用了一个按钮，因此可以使用jQueryUI设置样式。我尝试调用该链接，但未如预期的那样工作（看起来非常难看！）。 问题答案： 为默认值的属性
-
问题内容： 我以为Java擦除会在编译时消除泛型类型，但是当我自己对其进行测试时，我意识到在Bytecode中有一些有关泛型类型的信息。 这是我的测试： 我写了2节课： 和 我编译了两个类，并在通用类的某个地方看到了这一行 在非泛型类中： 所以很明显我在字节码中有通用信息，那么这个擦除的东西是什么？ 问题答案： 一些通用类型信息存储在属性中。请参阅JLS 4.8 和4.6以及JVM规范4.3.4。
-
但是谷歌拒绝了我的更新，说 问题：需要使用媒体存储API 您已经请求访问所有文件访问权限，但似乎您的应用程序的核心功能只要求访问媒体文件。使用MediaStore API，应用程序可以贡献和访问外部存储卷上可用的媒体，而不需要访问所有文件权限。 但是我以前从来没有使用过媒体商店API，我不知道它能用它删除图像文件，因为删除文件属于可写部分
-
问题内容： 我想将页脚放在页面底部。我尝试这个 但是我的页脚变得凌乱。我的网站是用WordPress制作的。如果可能的话，我不想使用任何插件。我只想使用纯CSS。 这是CSS脚本 问题答案： 从不再可用的在线来源（无效链接）实施一种干净的方法之后，您的页面所需的最低代码将为（请注意-可能最好使用而不是`footer
-
问题内容： 我想知道是否有什么方法可以对文本应用100％的透明度，以便我们可以在文本字符内看到页面的背景图片。 例如，假设我有一个带有白色背景的，并且背景图片为。我想将文字设置在内，以便尽管文字上有白色背景，也可以通过文字看到背景图片。 我可能可以使用倒置字体，但如果有的话，我希望有一种更好的方法。 问题答案： 它必须是动态的吗？唯一的方法是使用具有透明性的图像（GIF或更好的PNG）。 我不确定