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

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

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

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

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

См. Это example.

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

источник

2013-05-20 Brett Postin

Он отлично работает с хромом – Xavier

Я проверил в Chromium и «отскок» внизу все еще существует. –

Да, вы правы, не заметили этого. Но плохая новость заключается в «отказе» в документах boostrap: проверьте это http://twitter.github.io/bootstrap/javascript.html # collapse – Xavier

Late к партии, но:

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

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

источник

2014-07-31 23:02:17 TheHud

Для меня это было похоже, но это было поле вокруг div .collapse. У меня был div с двумя классами: '.content' и' .collapse'. «.content» имел прибыль. Я разделил два класса на два отдельных div, с '.collapse' wrapping' .content' – MeltingDog

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

Если вы посмотрите на этот поток SO Turning off Twitter Bootstrap Navbar Transition animation, вы можете увидеть, как отключить переход с переопределяющим классом CSS без перехода. Это не останавливает анимацию все вместе, но скорость его так, что скачок менее заметен ...

Добавить 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; 
}

Обновлено plunker .. http://plnkr.co/edit/xnvDGcDd21iCu69wKSub?p=preview

источник

2013-05-20 11:19:42 ZimSystem

Спасибо, но в идеале я хотел бы сохранить анимацию (которую я больше не вижу). Вы говорите, что не думаете, что это возможно? –

Вы могли бы попытаться замедлить анимацию, увеличив 's' на переходах, но в любом случае я думаю, что переходы вызывают« прыжок » – ZimSystem

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; 
}

источник

2015-05-02 18:33:35 Fabio

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

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

источник

2016-05-23 14:53:41

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

ответ

Смежные вопросы