CSS transition not working for first time

Question

I am trying to create a right sidebar, where there is a Open button to open the sidebar and a cancel button. When open button clicked a sidebar will slide to left along with 3 section. sections will also slide to left and make a free space for the sidebar and when cancel button is clicked everything will be normal again but CSS transition is not working for the first time I load the website. I used

transition: all 0.3s;

property but still after first time CSS transition works every time. What should I do now, Please help me to solve the issue

 function openNav() { document.getElementById("mySidebar").style.marginRight = "0"; document.getElementById("header").style.marginLeft = "-300px"; document.getElementById("header-slider").style.marginLeft = "-300px"; } function closeNav() { document.getElementById("mySidebar").style.marginRight = "-300px"; document.getElementById("header").style.marginLeft = "0"; document.getElementById("header-slider").style.marginLeft = "0"; }

 .sidebar { height: 100%; width: 300px; margin-right: -300px; position: fixed; z-index: 1; top: 0; right: 0; background-color: var(--second-color); overflow-x: hidden; transition: all 0.3s; } .sidebar img { width: 80%; height: auto; margin: 30px; margin-top: 100px; } .sidebar a { text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; } .sidebar p { margin: 30px; font-family: Arial; font-size: 16px; font-weight: 200; line-height: 1.8; color: var(--white-color); display: block; transition: 0.3s; } .sidebar a.closebtn:hover { color: var(--main-color); } .sidebar .closebtn { position: absolute; top: 0; right: 20px; font-size: 50px; } .openbtn { font-size: 23px; cursor: pointer; color: white; background: var(--second-color); border: none; float: right; } .openbtn:hover { color: var(--main-color); } .openbtn:focus { color: var(--main-color); } #main { transition: margin-right .3s; float: right; }

 <div id="header"> <div class="collaps"> <div id="mySidebar" class="sidebar"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <img src="assets/images/side-area.png" alt=""> <p class="text-justify">Legimus intellegam ea est, tamquam appellantur nec ei. Dicant perfecto deserunt quo id, ea etiam impetus pri. Mel ne vidit laboramus definiebas, quo esse aeterno</p> </div> <div id="main"> <button class="openbtn" onclick="openNav()">☰</button> </div> </div> </div> <div id="header-slider"></div>

Answer 1

I made a few changes to your code and added comments in the code for the lines that I changed or added.

• First, in your HTML file, I added an ID to the button.
• Second, in your CSS file, I removed color: white from the .openbtn class
• And third, I added two lines to your JS file (see comments in code)

 function openNav() { document.getElementById("mySidebar").style.marginRight = "0"; document.getElementById("header").style.marginLeft = "-300px"; document.getElementById("header-slider").style.marginLeft = "-300px"; document.getElementById("header-slider").style.marginLeft = "-300px"; // Add this line document.getElementById("openbtn").style.display = "none"; } function closeNav() { document.getElementById("mySidebar").style.marginRight = "-300px"; document.getElementById("header").style.marginLeft = "0"; document.getElementById("header-slider").style.marginLeft = "0"; // Add this line document.getElementById("openbtn").style.display = "block"; }

 .sidebar { height: 100%; width: 300px; margin-right: -300px; position: fixed; z-index: 1; top: 0; right: 0; background-color: var(--second-color); overflow-x: hidden; transition: all 0.3s; } .sidebar img { width: 80%; height: auto; margin: 30px; margin-top: 100px; } .sidebar a { text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; } .sidebar p { margin: 30px; font-family: Arial; font-size: 16px; font-weight: 200; line-height: 1.8; color: var(--white-color); display: block; transition: 0.3s; } .sidebar a.closebtn:hover { color: var(--main-color); } .sidebar .closebtn { position: absolute; top: 0; right: 20px; font-size: 50px; } .openbtn { font-size: 23px; cursor: pointer; /* Comment out this line */ /* color: white; */ background: var(--second-color); border: none; float: right; } .openbtn:hover { color: var(--main-color); } .openbtn:focus { color: var(--main-color); } #main { transition: margin-right .3s; float: right; }

 <div id="header"> <div class="collaps"> <div id="mySidebar" class="sidebar"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <img src="assets/images/side-area.png" alt=""> <p class="text-justify">Legimus intellegam ea est, tamquam appellantur nec ei. Dicant perfecto deserunt quo id, ea etiam impetus pri. Mel ne vidit laboramus definiebas, quo esse aeterno</p> </div> <div id="main"> <!-- Add an ID to the button --> <button id="openbtn" class="openbtn" onclick="openNav()">☰</button> </div> </div> </div> <div id="header-slider"></div>