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


79

<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 рядок, елемент видаляється з екрану.
Dean Meehan

2
Відповідь Bootstrap alpha 4 тут: вам це потрібно , <div class="clearfix">щоб обернути вашу навігацію, інакше вона стане неприємною.
suzumakes

1
@suzumakes div з clearfix повинен обернути яку навігацію? Я не бачу навігації в його коді!
gota

У моєму випадку вирівнювання елементів: центр застосовано до обгортки div причиною
поштовху

Відповіді:


144

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

Дякую ! виправлення працює, однак, чи є який-небудь спосіб використовувати його в таблиці з "tr" без необхідності обертати весь вміст у div?
Хасан АЛАМІ

Я ніколи не пробував, але відповідь тут ( stackoverflow.com/a/30081737/1483190 ) передбачає, що divдля кожного рядка може знадобитися обгортка . Тим НЕ менше, ви могли б розглянути можливість використання функції Wrap JQuery в ( api.jquery.com/wrap ) автоматично загорнути кожен <tr>в <div>з відповідним класом при завантаженні сторінки.
Філіп Стратфорд,

Також виправлена ​​проблема конфлікту "d-lg-block" та "обвалення"
Timar Ivo Batis

85

Поштовхи трапляються, коли батьківський 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
чудова відповідь, яка працює, і скрипка для завантаження, яка наочно демонструє, що рішення працює. Слава плакату!
Енді Лоренц,

2
Це те, що я шукав. Дякуємо, що пояснили роль jquery.
Рейчел С

Радий, що це допомогло √√ @RachelS
CR Rollyson

2
Або в моєму випадку це був зріст. Урок тут - не робити ніяких стилів, щоб згортати, замість цього оберніть вміст.
Žilvinas

Про це слід зазначити в документі.
Декстер,

5

Додаючи до відповіді @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>

Скрипка


Так, якщо з якоїсь причини потрібно встановити мінімальну висоту, вона повинна йти на текстовій області. Оновив вашу скрипкову версію лише для того, щоб показати її безперебійну роботу для всіх, хто її перевіряє: jsfiddle.net/uhjp14aq/3
CR Rollyson

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>

Скрипка


4

Хоча це була відповідь 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;
}

2

Моя стала більш гладкою не шляхом обгортання кожної дитини, а обгортання цілої розмітки допоміжним div . Подобається це:

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

2

Не встановлюйте висоту на .collapseтегу. Це впливає на анімацію, якщо висоту замінено на css; це не буде анімувати правильно.


0

Для таких, як я, у яких була інша, але схожа проблема, коли анімація взагалі не виникала:

З того, що я міг знайти, це може бути щось у налаштуваннях мого браузера, яке віддало перевагу меншому руху для цілей доступності. Я не зміг знайти жодного налаштування у своєму браузері, але мені вдалося змусити анімацію працювати, завантаживши локальну копію завантажувального файлу та коментуючи цей розділ файлу CSS:

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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.