jQuery Bootstrap 折叠动画不流畅
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27221332/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap collapse animation not smooth
提问by shapeare
<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>The problem is when clicking the addInfotab, you could find a jump in expanding the text_area, namely, the animation is not smooth.
问题是点击addInfotab时，展开时会出现跳跃text_area，即动画不流畅。
回答by Philip Stratford
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 divand collapse the wrapper div rather than the content itself.
如果其他人遇到这个问题，就像我刚刚遇到的那样，答案是将要折叠div的内容包装在 a 中并折叠包装器 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>
</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>回答by CR Rollyson
Jerking happens when the parent div ".collapse"has padding.
当父 div ".collapse"有填充时会发生抽搐。
Padding goes on the child div, not the parent. jQuery is animating the height, not the padding.
填充在子 div 上，而不是在父 div 上。jQuery 是动画高度，而不是填充。
Example:
例子：
<div class="form-group">
<a for="collapseOne" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">+ addInfo</a>
<div class="collapse" id="collapseOne" style="padding: 0;">
<textarea class="form-control" rows="4" style="padding: 20px;"></textarea>
</div>
</div>
<div class="form-group">
<a for="collapseTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="true" aria-controls="collapseOne">+ subtitle</a>
<input type="text" class="form-control collapse" id="collapseTwo">
</div>
Hope this helps.
希望这可以帮助。
回答by Yogesh Kumar Gupta
Adding to @CR Rollyson answer,
添加到@CR Rollyson 的答案中，
In case if you have a collapsible div which has a min-height attribute, it will also cause the jerking. Try removing that attribute from directly collapsible div. Use it in the child div of the collapsible div.
如果您有一个具有 min-height 属性的可折叠 div，它也会导致抽搐。尝试从可直接折叠的 div 中删除该属性。在可折叠 div 的子 div 中使用它。
<div class="form-group">
<a for="collapseOne" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">+ Not Jerky</a>
<div class="collapse" id="collapseOne" style="padding: 0;">
<textarea class="form-control" rows="4" style="padding: 20px;">No padding on animated element. Padding on child.</textarea>
</div>
</div>
回答by joeshmoe301
I think there can be several situations that cause the jerking. In my example, the issue deals with bottom margin on the non-animated child (even though the animated parent has no margin / padding). When removing the margin, the animation becomes smooth.
我认为可能有几种情况会导致抽搐。在我的示例中，该问题涉及非动画子项的底部边距（即使动画父项没有边距/填充）。去除边距时，动画变得平滑。
<div class="form-group">
<a for="collapseJerky" data-toggle="collapse" href="#collapseJerky" aria-expanded="true" aria-controls="collapseJerky">+ Jerky</a>
<div class="collapse" id="collapseJerky" style="margin:0; padding: 0;">
<textarea class="form-control" rows="4" style="margin-bottom: 20px;">No margin or padding on animated element. Margin on child.</textarea>
</div>
</div>
<div class="form-group">
<a data-toggle="collapse" href="#collapseNotJerky" aria-expanded="true" aria-controls="collapseNotJerky">+ Not Jerky</a>
<div class="collapse" id="collapseNotJerky" style="margin:0 padding: 0;">
<textarea class="form-control" rows="4" style="margin-bottom: 0;">No margin or padding on animated element or on child.</textarea>
</div>
</div>
<p>
Moles and trolls, moles and trolls, work, work, work, work, work. We never see the light of day. This is just content below the "Not Jerky" to show that the animation is smooth.
</p>
回答by Dexter
Although this has been answer https://stackoverflow.com/a/28375912/5413283, and regarding padding it is not mentioned in the original answer but here https://stackoverflow.com/a/33697157/5413283.
i am just adding here for visual presentation and a cleaner code.
尽管这是https://stackoverflow.com/a/28375912/5413283 的答案，并且关于填充它在原始答案中没有提到，但在这里https://stackoverflow.com/a/33697157/5413283。
我只是在这里添加视觉呈现和更清晰的代码。
Tested on Bootstrap 4 ✓
在 Bootstrap 4 上测试 ✓
Create a new parent div and add the bootstrap collapse. Remove the classes from the textarea
创建一个新的父 div 并添加引导程序折叠。从类中删除textarea
<div class="collapse" id="collapseOne"> <!-- bootstrap class on parent -->
<textarea class="form-control" rows="4"></textarea>
</div> <!-- // bootstrap class on parent -->
If you want to have spaces around, wrap textareawith padding. Do not add margin, it has the same issue.
如果你想要周围有空格，请textarea用padding包裹。不要添加margin，它有同样的问题。
<div class="collapse" id="collapseOne"> <!-- bootstrap class on parent -->
<div class="py-4"> <!-- padding for textarea -->
<textarea class="form-control" rows="4"></textarea>
</div> <!-- // padding for textarea -->
</div> <!-- // bootstrap class on parent -->
Tested on Bootstrap 3 ✓
在 Bootstrap 3 上测试 ✓
Same as bootstrap 4. Wrap the textarewith collapseclass.
与 bootstrap 4 相同。将textarewithcollapse类包裹起来。
<div class="collapse" id="collapseOne"> <!-- bootstrap class on parent -->
<textarea class="form-control" rows="4"></textarea>
</div> <!-- // bootstrap class on parent -->
And for paddingBootstrap 3does not have p-* classes like Bootstrap 4. So you need to create your own. Do not use paddingit will not work, use margin.
而对于paddingBootstrap 3没有像Bootstrap 4这样的 p-* 类。所以你需要创建你自己的。不使用padding它不会工作，使用margin.
#collapseOne textarea {
margin: 10px 0 10px 0;
}
回答by vaskort
Mine got smoother not by wrapping each child but wrapping whole markup with a helper div. Like this:
我的不是通过包装每个孩子而是用辅助 div 包装整个标记变得更流畅。像这样：
<div class="accordeonBigWrapper">
<div class="panel-group accordion partnersAccordeonWrapper" id="partnersAccordeon" role="tablist" aria-multiselectable="false">
accordeon markup inside...
</div>
</div>
回答by DDT
Do not set a height on the .collapsetag. It affects the animation, if the height is overridden with css; it will not animate correctly.
不要在.collapse标签上设置高度。如果高度被 css 覆盖，它会影响动画；它不会正确动画。
