Bootstrap 折叠动画不流畅

Posted 2023-05-08

【中文标题】Bootstrap 折叠动画不流畅

【英文标题】：Bootstrap collapse animation not smooth

【发布时间】：2015-01-29 01:00:01

【问题描述】：

<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展开有跳转，即动画不流畅。

【问题讨论】：

是的，但是一旦达到 1 行的最小尺寸，该元素就会从屏幕上移除。

Bootstrap alpha 4 在这里回答：你需要 <div class="clearfix"> 来包装你的导航，否则它会变得很笨拙。

@suzumakes 带有 clearfix 的 div 应该包装哪个导航？我在他的代码上看不到导航！

在我的情况下是 align-items: center 应用于包装 div 的原因是抽搐

【参考方案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>

【讨论】：

完美修复！谢谢！

将所有被折叠的东西都包裹在 div 中也是为我的桌子做的！

谢谢！该修复程序有效，但是，是否可以在带有“tr”的表中使用它而不必将所有内容包装在 div 中？

我从未尝试过，但这里的答案 (***.com/a/30081737/1483190) 表明每行可能需要一个包装器 div。但是，您可以考虑使用 jQuery 的 Wrap 函数 (api.jquery.com/wrap) 在页面加载时使用适当的类自动将每个 <tr> 包装在 <div> 中。

还修复了“d-lg-block”和“collapse”冲突的问题

【参考方案2】：

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

Fiddle Showing Both

希望这会有所帮助。

【讨论】：

很好的答案和一个启动的小提琴，清楚地证明了解决方案的工作。向海报致敬！

这就是我要找的。感谢您解释 jquery 的作用。

很高兴它帮助了 √√ @RachelS

或者在我的情况下是高度。这里的教训是不要做任何样式来折叠，而是包装内容。

这个应该在文档中提到。

【参考方案3】：

添加到@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>

Fiddle

【讨论】：

是的，如果出于某种原因需要设置 min-height，它应该放在 textarea 上。更新了你的小提琴版本，只是为了让任何检查它的人都能顺利运行：jsfiddle.net/uhjp14aq/3

【参考方案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

【参考方案5】：

虽然这是答案https://***.com/a/28375912/5413283，但关于填充，原始答案中没有提到，但这里是https://***.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 -->

如果您想在周围留出空格，请将 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 相同。用 collapse 类包装 textare。

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

【参考方案6】：

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

【参考方案7】：

不是通过包装每个孩子，而是用辅助 div 包装整个标记，我的变得更加流畅。像这样：

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

【参考方案8】：

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

【参考方案9】：

对于像我这样有不同但类似问题的人，动画根本没有发生：

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

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

【讨论】：

覆盖它是非常糟糕的做法。这是一个可访问性问题，最好保持原样