Jquery 引导折叠动画不平滑

---

如果其他人遇到这个问题，正如我刚才所说，答案是将要折叠的内容包装在

div

中，然后折叠包装div而不是内容本身

---

不是通过包装每个子项，而是通过使用helper div包装整个标记，我的标记变得更加平滑。像这样：

<div class="accordeonBigWrapper">
    <div class="panel-group accordion partnersAccordeonWrapper" id="partnersAccordeon" role="tablist" aria-multiselectable="false">
         accordeon markup inside...
    </div>
</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答案中添加

如果您有一个具有“最小高度”属性的可折叠div，它也会导致抖动。尝试从直接可折叠div中删除该属性。在可折叠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>

动画元素上没有边距或填充。孩子的边缘。
动画元素或子元素上没有边距或填充。

鼹鼠和巨魔，鼹鼠和巨魔，工作，工作，工作，工作，工作。我们永远看不到光明。这只是“不急动”下面的内容，以显示动画是平滑的。

---

不要在

.collapse

标记上设置高度。如果高度被css覆盖，则会影响动画；它将无法正确地设置动画。

虽然这是答案，但关于填充，原始答案中没有提到，而是在这里提到。
我只是在这里添加了一个直观的演示和更清晰的代码

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

在Bootstrap3上测试✓ 与引导程序4相同。用

折叠

类包装

textare

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

---

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

从我所能找到的情况来看，可能是我的浏览器设置中的某些东西，出于可访问性的目的，它更喜欢较少的运动。我在浏览器中找不到任何设置，但通过下载引导的本地副本并注释CSS文件的这一部分，我可以使动画正常工作：

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

---

---

折叠的div周围的填充必须是0，但一旦它达到其最小大小1行，元素将从屏幕上删除。引导alpha 4回答：您需要该

来包装您的导航，否则它会变硬。@suzumakes使用clearfix的div应该包装哪个导航？我在他的密码上看不到导航！在我的例子中，是align items:center应用于包装器div，这是导致jeckinggreat答案有效的原因，fiddle to boot清楚地表明了解决方案的有效性。海报真是太好了！这就是我要找的。感谢您解释jquery的作用。很高兴它有帮助√√ @拉舍尔对我来说是身高。这里的教训是不要做任何样式来折叠，而是包装内容。这应该在文档中提到。完美修复！非常感谢。将折叠在

div中的所有内容包装起来也为我的表做了这件事！谢谢修复程序正在运行，但是，是否可以在带有“tr”的表中使用它，而不必将所有内容包装在一个div中？我从未尝试过，但这里的答案（）表明每行可能需要一个包装器
div
。但是，当页面加载时，可以考虑使用jQuery的包函数（）在适当的类中自动将<<代码> <代码>包装在<代码> <代码>中。还解决了“D -LG块”和“折叠”的矛盾问题，如果需要根据任何原因设置最小高度，则应该在TeXTaReA上进行。更新了你的提琴版本，只是为了向任何查看它的人表明它工作顺利：覆盖它是非常糟糕的做法。这是一个可访问性问题，最好还是让它保持原状，这就是我解决它的原因。
#collapseOne textarea {
    margin: 10px 0 10px 0;
}

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