Bootstrap Collapse на панели, добавление вызывает «прыжок»

Question

Я применяю поведение коллапса к элементу панели, и он работает, но из-за дополнения, примененного к .panel-body, анимация останавливается при заполнении, а затем мгновенно привязывается к высоте , Вы можете видеть, что это происходит на самом простом примере, в codepen: http://codepen.io/FiveSixTwo/pen/NRQLPo

<div class="container"> 
    <div class="panel panel-default"> 
    <div class="panel-heading" role="button" data-target="#test" data-toggle="collapse">Test Heading<span class="btn-collapse-header glyphicons glyphicons-chevron-up"></span></div> 
    <div id="test" class="panel-body collapse in" aria-expanded="true"> 
     <p>Laoreet ac, aliquam sit amet justo nunc tempor, metus vel placerat suscipit, orci nisl iaculis eros, a tincidunt nisi odio eget lorem nulla condimentum tempor mattis ut vitae feugiat augue cras ut metus a risus iaculis scelerisque eu ac ante fusce 
     non varius purus aenean nec magna felis fusce vestibulum.</p> 
     <p>Laoreet ac, aliquam sit amet justo nunc tempor, metus vel placerat suscipit, orci nisl iaculis eros, a tincidunt nisi odio eget lorem nulla condimentum tempor mattis ut vitae feugiat augue cras ut metus a risus iaculis scelerisque eu ac ante fusce 
     non varius purus aenean nec magna felis fusce vestibulum.</p> 
     <p>Laoreet ac, aliquam sit amet justo nunc tempor, metus vel placerat suscipit, orci nisl iaculis eros, a tincidunt nisi odio eget lorem nulla condimentum tempor mattis ut vitae feugiat augue cras ut metus a risus iaculis scelerisque eu ac ante fusce 
     non varius purus aenean nec magna felis fusce vestibulum.</p> 
    </div> 
    </div> 
</div> 

Semi решение:

.panel-body { 
    padding: 0; 
    p { 
    padding: 15px 15px 0; 
    &:last-of-type { padding-bottom: 15px; } 
    } 
} 

Это «пол-решение», потому что это не будет работать по всему моему приложению без много дополнительных CSS, чтобы переопределить заполнение по умолчанию и не нарушать макет.

В идеале, я хочу, чтобы наложение на .panel-body и анимация коллапса воспроизводятся гладко, без изменения высоты звука в начале и конце анимации.

Я прокомментировал решение CSS в своем ручке, чтобы вы могли видеть проблему.

Я думаю, что самое легкое, что нужно сделать, это поместить все внутри другого div с дополнением на него, но это не намного лучше, чем полу-решение. Я бы предпочел глобальное решение CSS или даже JS, но до сих пор я ничего не придумал.

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

Answer 1

http://codepen.io/anon/pen/QKeZea

Я думаю, что это не работает, потому что вы пропустили div.panel-group, что окружит панель.

использовать синтаксис аккордеона http://getbootstrap.com/javascript/#collapse-example-accordion

<div class="container"> 
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
    <div class="panel panel-default"> 
    <div class="panel-heading" role="tab" id="headingOne"> 
     <h4 class="panel-title"> 
     <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
      Collapsible Group Item #1 
     </a> 
     </h4> 
    </div> 
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
     <div class="panel-body"> 
       <p>Laoreet ac, aliquam sit amet justo nunc tempor, metus vel placerat suscipit, orci nisl iaculis eros, a tincidunt nisi odio eget lorem nulla condimentum tempor mattis ut vitae feugiat augue cras ut metus a risus iaculis scelerisque eu ac ante fusce 
     non varius purus aenean nec magna felis fusce vestibulum.</p> 
     <p>Laoreet ac, aliquam sit amet justo nunc tempor, metus vel placerat suscipit, orci nisl iaculis eros, a tincidunt nisi odio eget lorem nulla condimentum tempor mattis ut vitae feugiat augue cras ut metus a risus iaculis scelerisque eu ac ante fusce 
     non varius purus aenean nec magna felis fusce vestibulum.</p> 
     <p>Laoreet ac, aliquam sit amet justo nunc tempor, metus vel placerat suscipit, orci nisl iaculis eros, a tincidunt nisi odio eget lorem nulla condimentum tempor mattis ut vitae feugiat augue cras ut metus a risus iaculis scelerisque eu ac ante fusce 
     non varius purus aenean nec magna felis fusce vestibulum.</p> 
     </div> 
    </div> 
    </div> 
</div> 
</div>