Twitter Bootstrap 100% высота аккордеона "прыжок"

Я пытаюсь реализовать аккордеон высотой 100%, используя компонент Collash Bootstrap collapse, точно так, как описано в этом question.

Я вручную устанавливаю высоты элементов .accordion-inner, как описано в этом .

Тем не менее, я испытываю "оживляющее" поведение при расширении/сгибании панелей. Я удалил все элементы /margin/border из элементов .accordion-inner, чтобы исключить эту возможность.

Это наиболее заметно в IE10, однако проблема также проявляется в Chrome.

Смотрите пример.

Любые идеи, что вызывает это "скачкообразное" поведение?

Ответы

Ответ 1

Позднее стороне, но:

У меня была аналогичная проблема, и я заметил, что если бы я удалил верхний край от элемента ниже коллапсирующего и заменил его padding-top, переход был плавным.

Итак - проверьте наличие полей на соседних элементах и ​​попробуйте заменить их дополнением, если это возможно.

Ответ 2

Я думаю, что "прыжок", который вы видите, связан с переходами CSS для класса .collapse.

Если вы посмотрите на этот SO-поток Отключив анимацию Twitter-загрузки Bootstrap Navbar, вы можете увидеть, как отключить переход с помощью переопределяющего класса CSS 'no- переход". Это не останавливает анимацию все вместе, но она ускоряет ее, так что скачок менее заметен...

Добавьте no-transition к вашим элементам аккордеона.

<div id="collapseOne" class="accordion-body collapse in no-transition">

Добавьте CSS..

.no-transition {
  -webkit-transition: height 0.001s;
  -moz-transition: height 0.001s;
  -ms-transition: height 0.001s;
  -o-transition: height 0.001s;
  transition: height 0.001s;
}

Обновлен плункер.. http://plnkr.co/edit/xnvDGcDd21iCu69wKSub?p=preview

Ответ 3

HTML:

<td><a data-toggle="collapse" href="#text1" aria-expanded="false" aria-controls="#text1"</a>
<div class="collapse" id="text1" aria-expanded="true" style="padding-top:5px"><img src="..."></div>

CSS

 .collapse.in{
    padding-bottom:5px;
 }

Ответ 4

У меня было это странное поведение, когда аккордеон расширялся до гораздо большей высоты, чем фактический видимый контент, а затем сворачивал (прыгал) обратно до фактической видимой высоты содержимого.

Оказывается, что у моего тела аккордеона для этой панели было несколько пустых элементов html, которые в моем случае были несколькими divs с классом col-sm-4 и ничего внутри них. Как только я прокомментировал их, это прыгающее поведение прекратилось. Надеюсь, это поможет кому-то с подобной проблемой.