title: Suppress CSS transition when screen size is changed
body: <p>I want to create slide in pane, and I coded it.<br />
  Special use cases of mine are:</p>
  <ul>
  <li>Not only sub pane slide-in, but also main page is shrink.</li>
  <li>When page width over 1170px, sub pane comes from bottom. If not, it comes from left.</li>
  <li>Some transition animation is needed.</li>
  </ul>
  <p>I coded like this:</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 button = document.querySelector('.toggle');
  const pane = document.querySelector('.pane');
  const container = document.querySelector('.container');
  
  button.addEventListener('click', () =&gt; {
    container.classList.toggle('open');
    container.classList.toggle('close');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
  }
  
  body {
    height: 100vh;
  }
  body .toggle {
    position: absolute;
    right: 2rem;
    top: 2rem;
    padding: 0.5rem 1rem;
    background: #212121;
    color: white;
    font-size: 1.2rem;
  }
  body .pane {
    position: fixed;
    padding: 1rem 2rem;
    background: #ffcccc;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
  }
  body .main {
    position: absolute;
    background: #00fccf;
    padding: 1rem 2rem;
    top: 0%;
    right: 0%;
    left: 0%;
    bottom: 0%;
  }
  body .container {
    height: 100%;
    width: 100%;
  }
  @media only screen and (min-width: 1170px) {
    body .pane {
      top: 0%;
      bottom: 0%;
      width: 30%;
      height: 100%;
    }
    body .open .pane {
      left: 0%;
      transition: 0.5s all ease;
    }
    body .open .main {
      left: 30%;
      transition: 0.5s all ease;
    }
    body .close .pane {
      left: -30%;
      transition: 0.5s all ease;
    }
    body .close .main {
      left: 0%;
      transition: 0.5s all ease;
    }
  }
  @media only screen and (max-width: 1170px) {
    body .pane {
      left: 0%;
      right: 0%;
      width: 100%;
      height: 30%;
    }
    body .open .pane {
      bottom: 0%;
      transition: 0.5s all ease;
    }
    body .open .main {
      bottom: 30%;
      transition: 0.5s all ease;
    }
    body .close .pane {
      bottom: -30%;
      transition: 0.5s all ease;
    }
    body .close .main {
      bottom: 0%;
      transition: 0.5s all ease;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div class="container close"&gt;
      &lt;div class="pane"&gt;
        &lt;h2&gt;Slideout Header&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class="main"&gt;
        &lt;button class="toggle"&gt;Toggle&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>This works well, except 1 problem.<br />
  If I change the screen size when sub pane was shown, the position of sub pane moved with animation.<br />
  My request is the position should change immediately, when screen size is changed.<br />
  Is this possible?</p>