javascript - 通过动画打开或关闭 div
问题描述
我有一个编辑表格。
在这种形式中,我有 2 个 div 。
显示表单的第一个 diveditForm
用于编辑,第二个表单infos
用于显示此表单的详细信息。
我想当手机或平板电脑的页面大小infos
必须隐藏并显示打开它的按钮时。它起作用了,它在移动或桌面大小时隐藏,当单击按钮隐藏但我需要使用infos
显示或隐藏动画的按钮显示或隐藏时。
我怎样才能做到这一点 ???
html:
<div class="container">
<div id="editForm" class="editForm">
<form>
<div class="items">
<label>name</label>
<input>
</div>
<div class="items">
<label>name</label>
<input>
</div>
<div class="items">
<label>name</label>
<input>
</div>
<div class="items">
<label>name</label>
<input>
</div>
</form>
</div>
<div id="infos" class="infos">
<ul>
<li>first</li>
<li>second</li>
</ul>
</div>
</div>
<div id="mySidenav" class="sidenav">
<a (click)="showHideInfo()">open</a>
</div>
CSS:
p {
font-family: Lato;
}
.container{
display: flex;
}
.editForm{
border: 1px solid red;
width: 60%;
display: flex;
justify-content: center;
}
.infos{
border: 1px solid red;
width: 40%;
display: flex;
justify-content: center;
}
@media (max-width: 768px)
{
.infos{
display: none;
width: 0;
}
.editForm{
width: 100%;
}
}
#mySidenav a {
position: fixed;
background-color: #4caf50;
right: 0px;
-webkit-transition: 0.3s;
transition: 0.3s;
top: 50%;
display: flex;
padding: 3px;
width: 39px;
text-decoration: none;
font-size: 20px;
color: white;
border-radius: 5px 0px 0px 5px;
}
#mySidenav a mat-icon{
margin-right: 10px;
margin-top: 6px;
}
#mySidenav a:hover {
right: 0;
}
#about {
top: 20px;
background-color: #4caf50;
}
当单击显示或隐藏按钮时,这是我的代码infos
:
showHideInfo(): void {
if(this.sidebarShow)
{
var editorEdit = document.getElementById('editForm');
editorEdit.style.visibility='visible';
editorEdit.style.width='100%';
var avtionInfo= document.getElementById('infos');
avtionInfo.style.display='none'
avtionInfo.style.width='0'
this.sidebarShow=!this.sidebarShow;
}else{
var editorEdit = document.getElementById('editForm');
editorEdit.style.visibility='hidden';
editorEdit.style.width='0';
var avtionInfo= document.getElementById('infos');
avtionInfo.style.display='block'
avtionInfo.style.width='100%'
avtionInfo.style.animation="showInRghit"
this.sidebarShow=!this.sidebarShow;
}
}
解决方案
您可以通过转换到 .editForm 来实现这一点,例如:
.editForm{
transition: width 0.3s ease;
}
请试试这个,看看这是否是要求。
推荐阅读
- java - 使用 Java 从 CSV 文件中读取
- javascript - React native 无法为 Image.source iOS 使用本地 tmp 文件路径
- javascript - 如何使上传的文件不能在php中使用字符名称
- elasticsearch - 基巴纳。从包含 JSON 的 @message 中提取字段
- linux - Talend 开放工作室
- php - 如何在 /wp-admin/* 中禁用缓存
- python - 将 XML 文件 (TED Europe) 提取到 pandas 数据框
- php - getimagesize ... 无法打开流:HTTP 请求失败!HTTP/1.1 400 错误请求
- java - 列出 JRE 上的 Java 虚拟机
- amazon-web-services - 如何在 AWS CLI 中注册创建的 webhook?