Question

我需要您解决我的问题我用bootstrap 4构建了两个侧边栏。他很好，但是没有过渡和影响。当我单击链接“仪表板”以打开第二个侧边栏时，它的打开速度非常快。

我想要一些很棒的效果。你有什么想法吗？非常感谢你

#sidebar1{

    background-color: #ccc;
    height: 400px;
}

#sidebar2{
    background-color: #aaa;
width: 100px; 
height: 400px; 

}

#main{
    background-color: #eee;
    height: 400px;
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <div class="row">
    <nav class="col-md-3 collapse show bg-default" id="sidebar1">
      <h2>I'm a sidebar 1</h2>
      <ul class="nav flex-column">
              <li class="nav-item">
                <a class="nav-link active" href="#sidebar2" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapseExample">
                  Dashboard <span class="sr-only">(current)</span>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">
                  <span data-feather="file"></span>
                  Orders
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">
                  Products
                </a>
              </li>
              </ul>
    </nav>
    <nav class="col-md-3 collapse show" id="sidebar2">
      <h2>I'm a sidebar 2</h2>      
    </nav>
    <main class="col-md-6" id="main">
      <h2>I'm the main content</h2>
    </main>
  </div>
</div>

这是我的codeply

Answer 1

您可以按照如下所示进行操作

#sidebar2 {
  transition: all 1s;
  background-color: #aaa;
  width: 100px;
  height: 400px;
}

.collapse:not(.show) {
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  padding: 0;
}

请注意，您不能向显示属性添加过渡。因此，您需要停止display：none并添加height：0和width：0来获得具有隐藏效果的相同效果。

#sidebar1 {
  background-color: #ccc;
  height: 400px;
}

#sidebar2 {
  transition: all 1s;
  background-color: #aaa;
  width: 100px;
  height: 400px;
}

.collapse:not(.show) {
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  padding: 0;
}

#main {
  background-color: #eee;
  height: 400px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <nav class="col-md-3 collapse show bg-default" id="sidebar1">
      <h2>I'm a sidebar 1</h2>
      <ul class="nav flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#sidebar2" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapseExample">
                  Dashboard <span class="sr-only">(current)</span>
                </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <span data-feather="file"></span> Orders
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
                  Products
                </a>
        </li>
      </ul>
    </nav>
    <nav class="col-md-3 collapse show" id="sidebar2">
      <h2>I'm a sidebar 2</h2>
    </nav>
    <main class="col-md-6" id="main">
      <h2>I'm the main content</h2>
    </main>
  </div>
</div>

如何为子侧边栏添加过渡？

1 个答案: