title: Page transition with CSS transform problems
body: <p>I want to do a simple transition between two pages. The animation should be a movement from right to left to go to the second page, and then, left to right to return to the first page.</p>
  
  <p>I've made this, but the problem is that duplicates the width of the page.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const screen1 = document.getElementsByClassName('screen1')[0];
  const screen2 = document.getElementsByClassName('screen2')[0];
  
  document.getElementById('toggle1').addEventListener('click', () =&gt; {
    screen1.style.transform = 'translatex(-100%)';
    screen2.style.transform = 'translatex(0)';
  });
  
  document.getElementById('toggle2').addEventListener('click', () =&gt; {
    screen1.style.transform = 'translatex(0)';
    screen2.style.transform = 'translatex(100%)';
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
  }
  
  .container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  
  .screen1 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: blue;
    transition: transform .5s;
  }
  
  .screen2 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: red;
    transform: translatex(100%);
    transition: transform .5s;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="screen1"&gt;
      &lt;button id="toggle1"&gt;Toggle&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="screen2"&gt;
      &lt;button id="toggle2"&gt;Toggle&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problems that I've with this:</p>
  
  <ul>
  <li>In an element with 100% of width I must to use the viewport units. In other case, the 100% will be two screens.</li>
  <li>An element with fixed position, positioned to the right of the screen, will take the right value of the second screen. So it won't be displayed.</li>
  <li>I can hide the scroll bar with <code>overflow-x: hidden</code> but the user can scroll to the next screen anytime.</li>
  </ul>
  
  <p>There is some way to fix this problems and maintain the "slide" transition?</p>