Suppress CSS transition when screen size is changed-CodePudding

I want to create slide in pane, and I coded it.
Special use cases of mine are:

Not only sub pane slide-in, but also main page is shrink.
When page width over 1170px, sub pane comes from bottom. If not, it comes from left.
Some transition animation is needed.

I coded like this:

const button = document.querySelector('.toggle');
const pane = document.querySelector('.pane');
const container = document.querySelector('.container');

button.addEventListener('click', () => {
  container.classList.toggle('open');
  container.classList.toggle('close');
});

* {
  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;
  }
}

<body>
  <div >
    <div >
      <h2>Slideout Header</h2>
    </div>
    <div >
      <button >Toggle</button>
    </div>
  </div>
</body>

This works well, except 1 problem.
If I change the screen size when sub pane was shown, the position of sub pane moved with animation.
My request is the position should change immediately, when screen size is changed.
Is this possible?

CodePudding user response：

As suggested in my comment, I added an EventListener for resizing, that checks whether your sub menu is opened or not and removes the class .transition accordingly. Once you hit toggle again the transition gets added back. Anyone feel free to comment a smarter solution.

<body>
  <div >
    <div >
      <h2>Slideout Header</h2>
    </div>
    <div >
      <button >Toggle</button>
    </div>
  </div>
</body>

* {
  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%;
  }
  body .open .main {
    left: 30%;
  }
  body .close .pane {
    left: -30%;
  }
  body .close .main {
    left: 0%;
  }
}
@media only screen and (max-width: 1170px) {
  body .pane {
    left: 0%;
    right: 0%;
    width: 100%;
    height: 30%;
  }
  body .open .pane {
    bottom: 0%;
  }
  body .open .main {
    bottom: 30%;
  }
  body .close .pane {
    bottom: -30%;
  }
  body .close .main {
    bottom: 0%;
  }
}

.transition {
  transition: 0.5s all ease;
}

const button = document.querySelector('.toggle');
const pane = document.querySelector('.pane');
const main = document.querySelector('.main');
const container = document.querySelector('.container');

button.addEventListener('click', () => {
  container.classList.toggle('open');
  container.classList.toggle('close');
  pane.classList.add("transition");
  main.classList.add("transition");
});

window.addEventListener("resize", function() {
  if(container.classList.contains("open")) {
        pane.classList.remove("transition");
        main.classList.remove("transition");
     }
})