Stretch body when navigation element is being hidden-CodePudding

Whenever I toggle the menu on the left to slide away, I want the body element to stretch to full width, how can I achieve this? Is using translate option not good for this? I want to use translate because the animation effect. The body width is 100% but it wont stretch fully

const nav = document.querySelector('.nav')
function toggleNav() {
    nav.classList.toggle("translate")
}

.container {
  display: flex;
}

.nav {
  width: 150px;
  background: red;
  height: 100vh;
}

.body {
  width: 100%;
  background: blue;
}

.translate {
  transform: translateX(-100%);
  transition: 0.5s;
}

<button onClick="toggleNav()">
  Toggle
</button>
<div >

  <div >
    nav
  </div>

  <div >
    test
  </div>

</div>

CodePudding user response：

with transform: translateX, the element remains in the stream. you can use the width

const nav = document.querySelector('.nav')
function toggleNav() {
    nav.classList.toggle("translate")
}

.container {
  display: flex;
}

.nav {
  width: 150px;
  background: red;
  height: 100vh;
  transition: 0.5s;
}

.body {
  width: 100%;
  background: blue;
}

.translate {
  opacity: 0;
  width: 0;
}

<button onClick="toggleNav()">
  Toggle
</button>
<div >

  <div >
    nav
  </div>

  <div >
    test
  </div>

</div>

OR, you can add width and padding for body

.translate   .body {
  width: calc(100%   150px);
  margin-left: -150px;
}