Question

＆＃13;

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

＆＃13;

问题是当点击addInfo标签时，您可以找到展开text_area的跳转，即动画不流畅。

Answer 1

如果有其他人遇到此问题，就像我刚才所说的那样，答案是将要折叠的内容包装在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>
</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>

Answer 2

当父div“.collapse”有填充时，就会发生Jerking。

Padding继续使用子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>

Fiddle Showing Both

希望这有帮助。

Answer 3

添加@CR Rollyson答案，

如果你有一个具有min-height属性的可折叠div，它也会导致抽搐。尝试从直接可折叠div中删除该属性。在可折叠div的子div中使用它。

<%= markdown @changelog %>

Fiddle

Answer 4

我认为可能会有几种情况导致抽搐。在我的示例中，该问题处理非动画子项的下边距（即使动画父级没有边距/填充）。删除边距时，动画变得平滑。

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

Fiddle

Answer 5

我不是通过包装每个孩子，而是用助手div包装整个标记，使得更顺畅。像这样：

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

Answer 6

请勿在{{1}}标记上设置高度。如果高度被css覆盖，它会影响动画;它不会正确动画。

Answer 7

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

在Bootstrap 4上进行测试✓

创建一个新的父div并添加引导折叠。从textarea

中删除类

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

如果您想在周围留空格，请用{strong>填充将textarea包裹起来。不要添加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;
}

Answer 8

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

从我发现的情况来看，可能是我的浏览器设置中的某些内容出于可访问性的原因而倾向于减少运动。我无法在浏览器中找到任何设置，但可以通过下载引导程序的本地副本并注释掉CSS文件的这一部分来使动画工作：

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

Answer 9

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

Bootstrap折叠动画不顺畅

9 个答案:

在Bootstrap 4上进行测试✓

在Bootstrap 3上进行测试✓