自举崩溃动画不流畅

<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，即动画不流畅。

如果有人遇到这个问题，就像我刚才遇到的那样，答案是将要折叠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>

当父div“ .collapse”具有填充时会发生抽搐。

填充在子div上，而不在父div上。jQuery使高度动画，而不是填充动画。

例：

  <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>

小提琴既显示

希望这可以帮助。

除了@CR Rollyson答案之外，

如果您有一个具有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>

小提琴

我认为可能有几种情况导致抽搐。在我的示例中，问题涉及非动画儿童的下边距（即使动画父母没有边距/填充）。删除边距时，动画变得平滑。

<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>

小提琴

尽管这是https://stackoverflow.com/a/28375912/5413283的答案，但是关于填充的问题并未在原始答案中提及，而是在这里https://stackoverflow.com/a/33697157/5413283。
我只是在这里添加可视化演示和更简洁的代码。

在Bootstrap 4上测试✓

创建一个新的父div并添加bootstrap折叠。从中删除类textarea

<div class="collapse" id="collapseOne"> <!-- bootstrap class on parent -->
    <textarea class="form-control" rows="4"></textarea>
</div> <!-- // bootstrap class on parent -->

如果您希望周围有空格，请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 -->

在Bootstrap 3上测试✓

同引导4.敷textare用collapse类。

<div class="collapse" id="collapseOne"> <!-- bootstrap class on parent -->
    <textarea class="form-control" rows="4"></textarea>
</div> <!-- // bootstrap class on parent -->

对于padding Bootstrap 3，没有像Bootstrap 4这样的p- *类。因此，您需要创建自己的。不使用padding它是行不通的，请使用margin。

#collapseOne textarea {
    margin: 10px 0 10px 0;
}

我的生活变得更加顺畅，不是通过包裹每个孩子，而是用一个助手div包裹整个标记。像这样：

<div class="accordeonBigWrapper">
    <div class="panel-group accordion partnersAccordeonWrapper" id="partnersAccordeon" role="tablist" aria-multiselectable="false">
         accordeon markup inside...
    </div>
</div>

不要在.collapse标签上设置高度。如果高度被css覆盖，则会影响动画。它不会正确设置动画。

对于像我这样的人，他们有一个完全不同的但相似的问题，即根本没有动画：

从我的发现中可能是我的浏览器设置中的某些内容，出于可访问性目的，它倾向于选择较少的移动。我在浏览器中找不到任何设置，但是通过下载引导程序的本地副本并注释掉CSS文件的这一部分，我能够使动画工作：

@media (prefers-reduced-motion: reduce) {
  .collapsing {
    -webkit-transition: none;
    transition: none;
  }
}

折叠div周围的填充必须为0