CSS转换和侧栏_Css_Transition_Sidebar

CSS转换和侧栏

css

CSS转换和侧栏,css,transition,sidebar,Css,Transition,Sidebar,我正在为我的项目制作一个简单的侧边栏，使用侧边栏和页面内容包装的css转换当我使用下面的代码时，我注意到转换适用于侧边栏，但不适用于页面内容包装器中的页面内容： #wrapper.toggled #page-content-wrapper { right: 235px; } 但是，当我在下面的代码中使用边距时，过渡就像我想要的那样平滑 #wrapper.toggled #page-content-wrapper { margin-left: -235px; } 我似乎不明白

我正在为我的项目制作一个简单的侧边栏，使用侧边栏和页面内容包装的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，并找到所使用的转换属性。

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

因此，对于#页面内容包装器，将其设置为：

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

您没有提供足够的CSS（转换属性在哪里？），请发布相关的CSS和HTML，以便重新创建您的问题。您好，先生，我已经发布了我在项目中使用的相关CSS和HTML。您好，我正在使用包装上的转换属性，边栏包装器和页面内容包装器。因此，对于页面内容包装器，如果要在“左”和/或“右”属性上设置动画，则需要为其设置一个默认值。所以将其设置为0，因为默认情况下它设置为自动。#页面内容包装{left:0；}#wrapper.toggled#页面内容包装{left:-235px；}Hi party您的解决方案与我想要的完全一样！谢谢你的帮助，你能把它作为答案贴出来吗？这样我就可以接受了。

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