Question

我正在使用侧边栏和页面内容包装器的css过渡为我的项目创建一个简单的侧边栏。

我注意到，当我使用下面的代码时，转换适用于侧边栏，但不适用于页面内容包装器内的页面内容：

#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;
}

Answer 1

当您在左侧和/或右侧属性上设置动画时，您需要设置一个值，以便默认启动它。因此将其设置为0，因为默认情况下它设置为auto。

因此，＃page-content-wrapper将其设置为：

#page-content-wrapper { left:0; } 
#wrapper.toggled #page-content-wrapper { left: -235px; }

Answer 2

因为在创建过渡效果时，您可以定义要应用的属性值。例如，宽度或高度等。因此，在您的情况下，它可能是“边距”。这是定义的。要找到答案，请查看文档中加载的css，并找到所使用的过渡属性。

CSS过渡和侧边栏

2 个答案: