我需要您解决我的问题 我用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
答案 0 :(得分: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>