Inquiries similar to this and this have been explored, but do not provide a solution for this particular scenario.
The objective is to smoothly slide a menu onto the screen using CSS translation when its parent is displayed. However, the current issue is that displaying the parent and applying the CSS class to trigger the translation both happen instantaneously instead of gradually, resulting in no animation effect.
While JavaScript could be utilized to animate the child element onto the screen, the aim is to maintain most of the animation logic within CSS.
Attempts to set the opacity to 0 have proven ineffective as it is essential for the menu and its parent to occupy no space or impact the layout.
View the Codepen demonstration here: https://codepen.io/Crashalot/pen/YzXmjYj
function toggleSidebar() {
$("#sidebar").toggleClass("show");
}
$("#button").on("click", function() {
toggleSidebar();
});body {
margin: 0;
padding: 0;
}
#button {
position: fixed;
top: 0;
left: 200px;
width: 150px;
height: 50px;
background: yellow;
display: flex;
justify-content: center;
align-items: center;
z-index: 8;
cursor: pointer;
}
#sidebar {
display: none;
}
#sidebar.show {
display: block;
}
.overlay {
position: fixed;
width: 100vw;
height: 100vh;
background: red;
z-index: -1;
}
.menuBox {
width: 200px;
height: 100vh;
background: blue;
transition: 0.3s ease-in-out;
transform: translate(-100%);
}
#sidebar.show .menuBox {
transform: translate(0);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sidebar">
<div class="overlay"></div>
<div class="menuBox"></div>
</div>
<div id="button">CLICK ME</div>