每當我切換左側的選單以滑開時，我希望 body 元素拉伸到全寬，我該如何實作？使用翻譯選項對此不利嗎？我想使用翻譯，因為影片效果。身體寬度為 100% 但不會完全伸展
const nav = document.querySelector('.nav')
function toggleNav() {
nav.classList.toggle("translate")
}.container {
display: flex;
}
.nav {
width: 150px;
background: red;
height: 100vh;
}
.body {
width: 100%;
background: blue;
}
.translate {
transform: translateX(-100%);
transition: 0.5s;
}<button onClick="toggleNav()">
Toggle
</button>
<div class="container">
<div class="nav">
nav
</div>
<div class="body">
test
</div>
</div>uj5u.com熱心網友回復：
，transform: translateX元素保留在流中。你可以使用width
const nav = document.querySelector('.nav')
function toggleNav() {
nav.classList.toggle("translate")
}.container {
display: flex;
}
.nav {
width: 150px;
background: red;
height: 100vh;
transition: 0.5s;
}
.body {
width: 100%;
background: blue;
}
.translate {
opacity: 0;
width: 0;
}<button onClick="toggleNav()">
Toggle
</button>
<div class="container">
<div class="nav">
nav
</div>
<div class="body">
test
</div>
</div>或者，您可以為正文添加width和padding
.translate .body {
width: calc(100% 150px);
margin-left: -150px;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/474067.html