Bootstrap崩溃动画不流畅 [英] Bootstrap collapse animation not smooth
本文介绍了Bootstrap崩溃动画不流畅的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
<a for="collapseOne" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="btn btn-primary">+ addInfo </a>
<textarea class="form-control collapse" id="collapseOne" rows="4"></textarea>
</div>
<div class="form-group">
<a for="collapseTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="true" aria-controls="collapseOne" class="btn btn-info">+ subtitle </a>
<input type="text" class="form-control collapse" id="collapseTwo">
</div>
问题是,当单击addInfo
选项卡时,您会发现在扩展text_area
时会出现跳跃,即动画不流畅.
The problem is when clicking the addInfo
tab, you could find a jump in expanding the text_area
, namely, the animation is not smooth.
推荐答案
如果有人遇到这个问题,就像我刚刚遇到的那样,答案是将要折叠的内容包装在div
内并折叠包装div而不是内容本身.
In case anybody else comes across this problem, as I just have, the answer is to wrap the content which you want to collapse inside a div
and collapse the wrapper div rather than the content itself.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
<a for="collapseOne" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="btn btn-primary">+ addInfo</a>
<div id="collapseOne" class="collapse">
<textarea class="form-control" rows="4"></textarea>
</div>
</div>
<div class="form-group">
<a for="collapseTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="true" aria-controls="collapseOne" class="btn btn-info">+ subtitle</a>
<input type="text" class="form-control collapse" id="collapseTwo">
</div>
这篇关于Bootstrap崩溃动画不流畅的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文