Анімація згортання бутстрапа не плавна

<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, а саме, анімація не є плавною.

Якщо хтось інший зіткнеться з цією проблемою, як я тільки що маю, відповідь полягає в тому, щоб обернути вміст, який ви хочете згорнути, всередині a 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 ".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>

Скрипка, показуючи обидва

Сподіваюся, це допомагає.

Додаючи до відповіді @CR Rollyson,

Якщо у вас є розбірний 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>

Скрипка

Думаю, ситуацій, які спричиняють поштовхи, може бути кілька. У моєму прикладі проблема стосується нижнього поля для неінімованої дочірньої організації (навіть якщо анімований батько не має полів / відступів). При видаленні поля анімація стає плавною.

<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 і додайте згортання завантажувального файлу Вилучіть класи зtextarea

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

Якщо ви хочете мати прогалини навколо, обгортання 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 немає p- * класів, як Bootstrap 4 . Тож вам потрібно створити свою власну. Не використовуйте 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