[英]open or close div by animation
我有一个编辑表格。
在这种形式中,我有 2 个 div。
第一个 div editForm
用于显示表单以进行编辑,第二个表单infos
用于显示此表单的详细信息。
我希望当手机或平板电脑的infos
大小必须隐藏并显示打开它的按钮时。 它的工作原理,它在移动或桌面大小时隐藏,当单击按钮隐藏但我需要当infos
显示或隐藏时使用 animation 按钮显示或隐藏。
我怎样才能做到这一点???
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;
}
请试试这个,看看这是否是要求。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.