CODEWITHSUNDEEP
cssanimation
kochizufan
kochizufan

Reputation: 2431

Suppress CSS transition when screen size is changed

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

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 class="container close">
    <div class="pane">
      <h2>Slideout Header</h2>
    </div>
    <div class="main">
      <button class="toggle">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?

Upvotes: 1

Views: 1399

Answers (1)

pso
pso

Reputation: 523

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 class="container close">
    <div class="pane">
      <h2>Slideout Header</h2>
    </div>
    <div class="main">
      <button class="toggle">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");
     }
})

Upvotes: 1

Related Questions