我想在窗格中創建幻燈片，并對其進行了編碼。
我的特殊用例是：
- 不僅子窗格滑入，而且主頁面也被縮小。
- 當頁面寬度超過 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 個問題。
如果我在顯示子窗格時更改螢屏尺寸，子窗格的位置會隨著影片移動。
我的要求是，當螢屏尺寸改變時，位置應該立即改變。
這可能嗎？
uj5u.com熱心網友回復：
正如我在評論中所建議的，我添加了一個用于調整大小的 EventListener，它檢查您的子選單是否已打開并.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");
}
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/410453.html
標籤：
下一篇：漢堡圖示css影片成x