Setting document style width with Javascript makes the animation go from left to right. How do I cou-CodePudding

So I have a (currently empty) div with just the id "menu". I gave it some CSS:

#menu {
    height:70%;
    width:0;
    position:fixed;
    z-index:1;
    top:0;
    left:50%;
    background-color:white;
    overflow-x:hidden;
    transition:0.2s;
    padding-top:70px;
}

inspired almost entirely by W3S' sidebar. I also have another div with onclick="openMenu()" and the function itself is

document.getElementById("menu").style.width = "250px";

So the issue is that despite working, the (currently blank) menu opens from left to right and not right to left or even middle to ends. Is this some default behaviour or an issue in my code? And to fix it, do I need to use CSS before and after or...

edit: I realise transition:0.2s is probably the culprit but I would still like to leave it in there

edit2: I should clarify that my goal is to have a sidebar open in the middle of the screen upon clicking a div. Therefore it should be invisible on startup and then open up (by adding width) with a click, hence the JS. My issue of course is that I would prefer the menu to transition from nothing into something by opening up both ways (instead of left to right) from the middle of the screen or simply making it reverse-fade into existence

CodePudding user response：

This snippet shows a very simple approach that you can take for what you're after

Instead of using JS to control the individual CSS properties, it's often better to use classes which you can toggle via JS

document.getElementById("toggle-menu").onclick = function(){
    document.getElementById("menu").classList.toggle("active")
}

html,
body {
  height: 100%;
}

#menu {
  display:none;
  position:fixed;
  background:#f57777;
  border-radius:4px;
  left:0;
  right:0;
  width:250px;
  height:250px;
  margin:auto;
  box-shadow: 0 0 12px #aaa;
}

#menu.active {
  display:block;
}

#toggle-menu {
  background: #fafafa;
  border:1px solid #eee;
  border-radius:4px;
  cursor:pointer;
  padding: 4px;
  display:inline-block;
}

<div id="toggle-menu">Toggle Menu</div>
<div id="menu">
Your content in here
</div>

CodePudding user response：

If you position the menu in the center as required and cover it with two 'curtains', one on the left and one on the right, you can shrink them both down to 0 width to reveal the menu from the center outwards.

This snippet does this by introducing before and after pseudo elements which have the same background color as the surroundings (white in this instance) with width 50% of the menu width and before anchored on the left and after on the right.

#menu {
  height: 70%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: white;
  overflow-x: hidden;
  padding-top: 70px;
  text-align: center;
}

#menu::before,
#menu::after {
  content: '';
  background: white;
  width: 50%;
  height: 100%;
  top: 0;
  position: absolute;
  transition: width .2s linear;
  display: inline-block;
  z-index: 1;
}

#menu::before {
  left: 0;
}

#menu::after {
  right: 0;
}

#menu.expand::before,
#menu.expand::after {
  width: 0;
}

<button onclick="document.querySelector('#menu').classList.toggle('expand')">CLICK ME</button>
<div id="menu">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>