Bootstrap 折叠动画不流畅 [英] Bootstrap collapse animation not smooth
问题描述
<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 </><textarea class="form-control collapse" id="collapseOne" rows="4"></textarea>
<div class="form-group"><a for="collapseTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="true" aria-controls="collapseOne" class="btn btn-info">+副标题</><input type="text" class="form-control collapse" id="collapseTwo">
问题是在点击addInfo
标签时,发现text_area
展开时有一个跳跃,即动画不流畅.
如果其他人遇到这个问题,就像我刚刚遇到的那样,答案是将要折叠的内容包装在 div
并折叠包装器 div 而不是内容本身.
<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 class="form-group"><a for="collapseTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="true" aria-controls="collapseOne" class="btn btn-info">+副标题</a><input type="text" class="form-control collapse" id="collapseTwo">