更改屏幕尺寸时抑制 CSS 过渡

Question

我想在窗格中创建幻灯片，并对其进行了编码。
我的特殊用例是：

不仅子面板滑入，而且主页面也缩小了。
当页面宽度超过1170px时，子面板从底部开始。如果不是，它来自左边。
需要一些过渡动画。

我这样编码：

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>

这很好用，除了 1 个问题。
如果我在显示子窗格时更改屏幕大小，子窗格的位置会随着动画移动。
我的要求是当屏幕尺寸改变时，位置应该立即改变。
这可能吗？

Answer 1

正如我评论中所建议的，我添加了一个用于调整大小的 EventListener，它会检查您的子菜单是否打开并相应地删除 class .transition。一旦你再次点击切换，transition 就会被添加回来。任何人都可以随意评论更智能的解决方案。

<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");
     }
})

更改屏幕尺寸时抑制 CSS 过渡

Suppress CSS transition when screen size is changed

css

animation