[英]Smooth Animation for Bootstrap 4 collapse
我得到了我想要的東西,但是動畫效果並不理想。 我知道,如果沒有padding
,動畫會更好,但是我需要填充才能獲得設計。 我該如何解決這個問題?
HTML:
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="block">
<label class="checkbox"> This is my checkbox
<input type="checkbox" data-toggle="collapse" data-target="#collapseExample">
</label>
<div class="collapse" id="collapseExample">
<div class="row">
<div class="col-12">
<div class="form-group">
<input type="number" class="form-control" placeholder="option one">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option two">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option three">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.block {
margin-top: 30px;
}
.collapse {
background-color: #eee;
padding: 30px 15px;
}
它基於最新版本的Bootstrap 4。
設置.collapse
它會先應用.collapse
的引導樣式, .collapse
再應用.collapse
,因為這會延遲...
使用ID #collapseExample
設置樣式:
.block { margin-top: 30px; } #collapseExample{ background-color: #eee; padding: 30px 15px; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/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"> <div class="row"> <div class="col-sm-12"> <div class="block"> <label class="checkbox"> This is my checkbox <input type="checkbox" data-toggle="collapse" data-target="#collapseExample"> </label> <div class="collapse" id="collapseExample"> <div class="row"> <div class="col-12"> <div class="form-group"> <input type="number" class="form-control" placeholder="option one"> </div> <div class="form-group"> <input type="number" class="form-control" placeholder="option two"> </div> <div class="form-group"> <input type="number" class="form-control" placeholder="option three"> </div> </div> </div> </div> </div> </div> </div> </div>
編輯您的評論!
關閉時會出現“拖動”。
使用jQuery onclick
的checkbox
並應用padding
如下: 這里撥弄
$('.checkbox').on('click', function(){ if($('.collapse.show').length>0) $('.collapse').css('padding','0'); else $('.collapse').css('padding','30px 15px'); });
.block { margin-top: 30px; } #collapseExample{ background-color: #eee; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/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"> <div class="row"> <div class="col-sm-12"> <div class="block"> <label class="checkbox"> This is my checkbox <input type="checkbox" data-toggle="collapse" data-target="#collapseExample"> </label> <div class="collapse" id="collapseExample"> <div class="row"> <div class="col-12"> <div class="form-group"> <input type="number" class="form-control" placeholder="option one"> </div> <div class="form-group"> <input type="number" class="form-control" placeholder="option two"> </div> <div class="form-group"> <input type="number" class="form-control" placeholder="option three"> </div> </div> </div> </div> </div> </div> </div> </div>
我解決了。 這是因為我在父div中添加了padding
。
.block { margin-top: 30px; } .block__collapse { background-color: #eee; padding: 30px 15px; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/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"> <div class="row"> <div class="col-sm-12"> <div class="block"> <label class="checkbox"> This is my checkbox <input type="checkbox" data-toggle="collapse" data-target="#collapseExample"> </label> <div class="collapse" id="collapseExample"> <div class="block__collapse"> <div class="row"> <div class="col-12"> <div class="form-group"> <input type="number" class="form-control" placeholder="option one"> </div> <div class="form-group"> <input type="number" class="form-control" placeholder="option two"> </div> <div class="form-group"> <input type="number" class="form-control" placeholder="option three"> </div> </div> </div> </div> </div> </div> </div> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.