it-roy-ru.com

Анимация коллапса при загрузке не плавная

<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, а именно, анимация не является плавной.

42
shapeare

В случае, если кто-то еще сталкивается с этой проблемой, как я только что сказал, ответ заключается в том, чтобы обернуть содержимое, которое вы хотите свернуть, в переменную 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>

85
Philip Stratford

Дрожание происходит, когда у parent 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>

Fiddle Показаны оба

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

47
CR Rollyson

Добавление к ответу @CR Rollyson,

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

4
Yogesh Kumar Gupta

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

<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

3
joeshmoe301

Моя стала более гладкой, не оборачивая каждый дочерний элемент, а оборачивая всю разметку вспомогательным div . Как это:

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

Хотя это был ответ 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 в 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. Оберните textare классом collapse.

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

А для paddingBootstrap 3 нет классов p- *, ​​таких как Bootstrap 4. Так что вам нужно создать свой собственный. Не используйте padding, он не будет работать, используйте margin.

#collapseOne textarea {
    margin: 10px 0 10px 0;
}
0
TheHive

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

0
DDT