Twitter Bootstrap 100% akordeon wysokości "skok"

Próbuję zaimplementować akordeon o wysokości 100% za pomocą komponentu zwinięcia Bootstrap na Twitterze, dokładnie tak, jak to opisano w tej publikacji: question.Twitter Bootstrap 100% akordeon wysokości "skok"

Ręczne ustawianie wysokości elementów .accordion-inner zgodnie z opisem w tym answer.

Jednak doświadczam "skaczącego" zachowania podczas rozwijania/zwijania paneli. Usunąłem całe wypełnienie/margines/obramowanie z elementów .accordion-inner, aby wyeliminować tę możliwość.

Jest to najbardziej zauważalne w IE10, jednak problem jest również widoczny w Chrome.

Zobacz ten example.

Jakieś pomysły, które powodują takie "skoczne" zachowanie?

Źródło

2013-05-20 Brett Postin

Działa dobrze z chromem – Xavier

Sprawdziłem Chromium i "odbicie" na dole nadal istnieje. –

Tak, masz rację, nie zauważyłeś tego .. Ale złą wiadomością jest też "odbicie" w dokumentach boostrap: sprawdź to http://twitter.github.io/bootstrap/javascript.html # collapse – Xavier

późno do partii, ale:

Miałem podobny problem i zauważyłem, że jeśli usunę margines-wierzchołek z elementu poniżej zwijacza i zastąpię go górną krawędzią, przejście było płynne.

Więc - sprawdź marginesy na sąsiadujących elementach i spróbuj zastąpić je marginesem, jeśli to możliwe.

Źródło

2014-07-31 23:02:17 TheHud

Dla mnie było to podobne, ale był to margines wokół div .collapse. Miałem div z dwiema klasami: '.content' i' .collapse'. ".content" ma marginesy. Rozdzieliłem dwie klasy na dwie osobne części div, z opcją '.collapse' wrapapping' .content' – MeltingDog

Myślę, że "skok", który widzisz, wynika z przejść CSS dla klasy .collapse.

Jeśli spojrzysz na ten wątek w wersji Turning off Twitter Bootstrap Navbar Transition animation, możesz zobaczyć, jak wyłączyć przejście przy nadpisywaniu "braku przejścia" w klasie CSS. To nie zatrzymać animację wszyscy razem, ale przyspiesza go tak, że skok jest mniej zauważalny ...

Dodaj no-transition do swoich elementów akordeon ciałem ..

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

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

Updated plunker .. http://plnkr.co/edit/xnvDGcDd21iCu69wKSub?p=preview

Źródło

2013-05-20 11:19:42 ZimSystem

Dzięki, ale najlepiej chciałbym zachować animację (której już nie widzę). Mówisz, że nie uważasz, że to możliwe? –

Możesz spróbować spowolnić animację poprzez zwiększenie 's' na przejściach, ale tak czy inaczej uważam, że przejścia powodują" skok " – 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; 
}

Źródło

2015-05-02 18:33:35 Fabio

miałam to dziwne zachowanie, gdzie akordeon rozwinie się do znacznie większej wysokości niż rzeczywistej widocznej treści, a następnie zwinąć (jump) z powrotem do rzeczywistej wysokości widocznej zawartości.

Okazuje się, że moje ciało akordeon dla tego panelu miał kilka pusty html elementy, które, w moim przypadku było kilka divs z col-sm-4 klasa i nic w nich. Kiedy je skomentowałem, zachowanie skakania ustało. Mam nadzieję, że to pomoże komuś z podobnym problemem.

Źródło

2016-05-23 14:53:41

Twitter Bootstrap 100% akordeon wysokości "skok"

Odpowiedz

Powiązane problemy