I advise you to apply rule opacity
together with width: 0
. And also, to shorten the code, I advise you to add and remove styles using the classlist
:
Add class:
document.querySelector("#TopBarExpandMenu").classList.add('active');
Remove class:
document.querySelector("#TopBarExpandMenu").classList.remove('active');
Also, add this selector to your css:
#TopBarExpandMenu.active {
width: 120px;
opacity: 1;
}
And add opacity: 0
to #TopBarExpandMenu
.
function ExpandMenu() {
var ButtonExpandMenuWidth = document.getElementById("TopBarExpandMenu"),
style = window.getComputedStyle(ButtonExpandMenuWidth),
top = style.getPropertyValue("width");
if (top === "0px") {
document.querySelector("#TopBarExpandMenu").classList.add('active');
} else if (top === "120px") {
document.querySelector("#TopBarExpandMenu").classList.remove('active');
}
}
#mainBody {
height: 600px;
min-height: 600px;
width: 1200px%;
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
}
/* ------------------------------------------ */
#sideBar {
transition: 500ms ease-in-out;
height: 100%;
width: 150px;
position: fixed;
left: 0;
background: #212529;
z-index: 100;
border-right: 1px solid;
border-color: cyan;
}
/* ------------------------------------------ */
#StatusBar {
background: #30FF83;
width: 100%;
height: 1px;
position: fixed;
max-height: 3px;
z-index: 101;
}
/* ------------------------------------------ */
#sideBarRows {
position: fixed;
top: 60px;
width: inherit;
z-index: 50;
}
/* ------------------------------------------ */
#download_button {
background: transparent;
width: inherit;
text-align: left;
border: none;
height: 33px;
top: -8px;
position: relative;
color: white;
font-size: 12px;
}
#download_button_frame {
height: 50px;
position: relative;
border-left: 2px solid var(--red);
padding-top: 15px;
margin-right: 1%;
}
/* ------------------------------------------ */
#ManualDeploy_Frame {
height: 50px;
position: relative;
border-left: 2px solid var(--red);
top: 20px;
z-index: 50;
}
#ManualDeploy_Button {
border: 0px;
width: auto;
height: 42px;
position: relative;
text-align: left;
top: 4px;
font-size: 12px;
background-color: transparent;
margin-left: 1px;
}
/* ------------------------------------------ */
.menuButton {
background: transparent;
background: url("menu.png") center / contain, rgba(181,20,20,0);
width: 40px;
height: 40px;
position: fixed;
left: 1%;
border: none;
top: 2%;
transition: 500ms ease-in-out;
-webkit-app-region: no-drag;
transform: rotate(0deg);
z-index: 1000;
-webkit-app-region: no-drag;
}
#menuButton:focus {
background: url("menu.png") left / contain no-repeat transparent;
outline: 0px;
}
#menuButton:hover {
background: url("menu.png") left / contain no-repeat transparent;
}
/* ------------------------------------------ */
/* ------------------------------------------ */
.DownloadPage_Frame {
display: flex;
background: #212529;
position: fixed;
z-index: 99;
height: 100%;
width: 100%;
right: 0%;
top: 0%;
}
/* ------------------------------------------ */
.topBarHeader {
display: flex;
height: 50px;
width: 100%;
position: relative;
z-index: 99;
flex: 1;
}
.topBar {
position: fixed;
background: #212529;
height: 50px;
width: 100%;
flex: 1;
-webkit-user-select: none;
-webkit-app-region: drag;
}
/* ------------------------------------------ */
.closeButton, .closeButtonDiv {
display: flex;
position: fixed;
height: 20px;
width: 60px;
right: 10px;
margin: auto;
text-align: center;
align-items: center;
justify-content: center;
border-radius: 40px;
font-size: 10px;
top: 15px;
transition: 200ms ease-in-out;
border: 0px;
-webkit-app-region: no-drag;
}
.closeButton {
background: var(--danger);
-webkit-app-region: no-drag;
}
.closeButton:hover {
background: #dad9d4;
transition: 200ms ease-in-out;
}
/* ------------------------------------------ */
.expandButton {
display: flex;
position: fixed;
height: 20px;
width: 40px;
right: 80px;
margin: auto;
text-align: center;
align-items: center;
justify-content: center;
border-radius: 40px;
font-size: 10px;
top: 15px;
transition: 200ms ease-in-out;
border: 0px;
background: url("expand.png") center / contain no-repeat transparent;
transform: rotate(90deg);
-webkit-app-region: no-drag;
}
.expandButton:focus {
transform: rotate(-90deg);
-webkit-app-region: no-drag;
}
/* ------------------------------------------ */
#TopBarExpandMenu {
display: flex;
position: fixed;
top: 15px;
right: 110px;
margin: auto;
height: 20px;
width: 0;
background: white;
border-radius: 15px;
transition: 200ms ease-in-out;
transform: scale(1);
align-items: center;
opacity: 0;
}
#TopBarExpandMenu.active {
width: 120px;
opacity: 1;
}
/* ------------------------------------------ */
#MaximizeButton, #MinimizeButton {
display: flex;
position: static;
background: rgb(101,217,101);
border-radius: 15px;
color: black;
padding: 1px;
height: 90%;
width: 50%;
font-size: 10px;
text-align: center;
justify-content: center;
margin-left: 2px;
margin-right: 2px;
text-decoration: none;
-webkit-app-region: no-drag;
}
#MaximizeButton {
background: rgb(234,174,57);
}
#MaximizeButton:hover, #MinimizeButton:hover {
transform: scale(1.5);
transition: 100ms ease-in-out;
}
<div id="StatusBar" class="StatusBar"></div>
<div class="container sideBar" id="sideBar"><button class="btn btn-primary menuButton" id="menuButton" type="button" onclick="sideBar()"></button>
<div class="row sideBarRows" id="sideBarRows">
<div class="col" id="download_button_frame"><button class="btn btn-primary download_button" id="download_button" type="button">Download Loads</button></div>
<div class="col" id="ManualDeploy_Frame"><button class="btn btn-primary ManualDeploy_Button" id="ManualDeploy_Button" type="button">Manual Deploy</button></div>
</div>
</div>
<header id="topBarHeader" class="topBarHeader">
<div id="topBar" class="topBar"></div>
<div id="TopBarExpandMenu" class="TopBarExpandMenuClass"><a id="MaximizeButton" class="MaximizeButton" href="#">Minimize</a><a id="MinimizeButton" class="MinimizeButton" href="#">Maximize</a></div>
<div id="closeButtonDiv" class="closeButtonDiv" style="color: var(--danger);"><button class="btn btn-primary closeButton" id="closeButton" type="button">Close</button></div><button class="btn btn-primary expandButton" id="expandButton" type="button" onclick="ExpandMenu()"></button>
</header>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…