부트 스트랩 패널에서 축소하면 패딩으로 인해 "점프"가 발생합니다.

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> 

세미 솔루션 :

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

이 그것없이 내 전체 응용 프로그램에서 작동하지 않을 것 때문에 '반 솔루션'이다 기본 패딩을 무시하고 레이아웃을 손상시키지 않는 추가 CSS가 많이 있습니다.

이상적으로는 패딩을 .panel-body에 유지하고 애니메이션의 시작과 끝 부분에서 진동 높이 변경없이 부드럽게 애니메이션을 재생하고 싶습니다.

필자는 솔루션의 CSS를 내 펜에 주석 처리하여 문제를 볼 수있었습니다.

가장 쉬운 방법은 모든 div를 다른 div 안에 넣는 것입니다.하지만 semi-solution보다 훨씬 좋지는 않습니다. 글로벌 CSS 또는 JS 솔루션을 선호하지만 지금까지 아무 것도 생각 해보지 않았습니다.

부트 스트랩은 일부 항목에서는 문제가 없지만 사용할수록 더 커지고 내 앱이 커질수록 더 싫어합니다.

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>