Аппликация обрушения Bootstrap негладкая

Здесь вы можете получить доступ к моему коду http://jsfiddle.net/qba2xgh6/9/:

Проблема заключается в том, что при нажатии на вкладку addInfo вы можете найти скачок расширения text_area, а именно, анимация не является гладкой.

<div class="form-group">
    <a for="collapseOne" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">+ 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">+ subtitle</a>
    <input type="text" class="form-control collapse" id="collapseTwo">
</div>

Ответ 1

В случае, если кто-то другой сталкивается с этой проблемой, как я только что, ответ заключается в том, чтобы обернуть содержимое, которое вы хотите свернуть внутри div, и свернуть оболочку обертки, а не сам контент. Я обновил скрипт OP, чтобы продемонстрировать: http://jsfiddle.net/26272tzu/. Фиксированный код OP выглядит следующим образом:

<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">
        <textarea class="form-control" rows="4"></textarea>
    </div>
</div>

Ответ 2

Отслеживание происходит, когда родительский div ".collapse" имеет отступы.

Наложение продолжается на дочерний 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>

Скрипт показывает оба

Надеюсь, что это поможет.

Ответ 3

Шахта стала более гладкой, не обертывая каждого ребенка, а обертывая всю разметку вспомогательным div. Вот так:

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

Ответ 4

Добавление в @CR Rollyson answer,

Если у вас есть складной div, который имеет атрибут min-height, это также вызовет дергание. Попробуйте удалить этот атрибут из непосредственно разворачиваемого 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

Ответ 5

Я думаю, что может быть несколько ситуаций, которые вызывают подергивание. В моем примере проблема касается нижнего поля для неанимированного дочернего элемента (даже если анимированный родитель не имеет поля/дополнения). При удалении поля анимация становится гладкой.

<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

Ответ 6

Не устанавливайте высоту в теге .collapse. Это влияет на анимацию, если высота переопределена css; он не будет анимировать правильно.