我正在为我的元素制作一个简单的侧边栏，使用侧边栏和页面内容包装器的 CSS 转换。
当我使用以下代码时，我注意到过渡对侧边栏有效，但对 page-content-wrapper 内的页面内容无效:
#wrapper.toggled #page-content-wrapper {
right: 235px;
}
但是当我在下面的代码中使用边距时，过渡很平滑，就像我想要的那样。
#wrapper.toggled #page-content-wrapper {
margin-left: -235px;
}
我似乎无法理解为什么会这样？
以下是我使用的 HTML:
<body>
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
<li><a href="">Link 6</a></li>
</ul>
</div>
<div id="page-content-wrapper">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-inner">
<a class="btn btn-custom" id="menu-toggle">
<span>MENU</span>
</a>
<a href="index.php" class="navbar-brand">PROJECT</a>
</div>
<div>
</nav>
<div class="container-fluid">
<div class="row">
<p>some text some text some text some text some text some text
some text some text some text some text some text some text</p>
</div>
</div>
</div>
</div>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
我也在使用以下 CSS:
#wrapper {
position: absolute;
width: 100%;
height: 100%;
overflow-x: hidden;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar-wrapper {
z-index: 1;
position: absolute;
top: 0;
width: 235px;
height: 100%;
background-color: #c8102e;
right: -235px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#page-content-wrapper {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.sidebar-nav {
list-style: none;
padding: 0;
}
.sidebar-nav li a {
display: block;
padding: 15px;
text-decoration: none;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #sidebar-wrapper {
right: 0;
}
#wrapper.toggled #page-content-wrapper {
margin-left: -235px;
}
.btn-custom {
position: relative;
float: right;
}
最佳答案
当您在左侧和/或右侧属性上设置动画时，您需要设置一个值以使其默认启动。所以将它设置为 0，因为默认情况下它设置为自动。
因此对于#page-content-wrapper 将其设置为:
#page-content-wrapper { left:0; }
#wrapper.toggled #page-content-wrapper { left: -235px; }
关于CSS 过渡和侧边栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33337316/