너비, 채우기 및 테두리의 매끄러운 CSS '축소'전환

Question

폭, 채우기 및 테두리를 변경하여 포함 된 div 및 부동 요소를 효과적으로 '축소합니다.'전환을 만들려고합니다.

HTML :

<div> 
    <div class="section"> 
     <div class="sub-section">label</div> 
     <div class="sub-section">field</div> 
    </div> 
    <div class="section collapsible"> 
     <div class="sub-section">label</div> 
     <div class="sub-section">field</div> 
    </div> 
    <div class="section"> 
     <div class="sub-section">label</div> 
     <div class="sub-section">field</div> 
    </div>  
</div> 

CSS :

.section { 
    float: left; 
    width: 25%; 
} 

.section.collapsible { 
    opacity: 1; 
    transition: opacity linear 1s, width linear 1s; 
} 

.section.collapsible.collapsed { 
    width: 0; 
    opacity: 0; 
} 

.sub-section { 
    width: 50%; 
    float: left; 
    height: 42px; 
} 

http://jsfiddle.net/p38b6ndb/1

은 샘플을 포함하려면 :

난 당신이 여기에서 볼 수있는 몇 가지 조사를 수행 한 시나리오 : 두 번째 섹션은 접혀 있어야하며 세 번째 섹션은 첫 번째 섹션과 함께 왼쪽으로 이동합니다.

문제 : I는 폭이 높이 아래 후속 요소 밀어 증가하는 원인 div의 주위를 감싸는 붕괴에 일정량에 도달 할 때 붕괴되고 DIV에 padding 및/또는 border있는 경우.

• 나는 box-sizing: border-box와 시도했지만이 역시 명확한 포장 효과가 있습니다.
• padding 및 border-width은 물론 width도 전환하려고 시도했지만 여전히 다시 전환됩니다. 다른 기간을 실험 할 수는 있지만 여전히 이상한 효과가 있습니다. 그들이 불투명 가서 그냥 가 margin-left을 추가 할 수 있지만이 높이에 영향을주지 않습니다와 '아래로 밀어'를
  로
• 나는 패딩과 국경을 무시하려고 노력했다.
• 높이를 고정시킬 수는 있지만 실제로는 각각의 섹션에 다양한 크기의 콘텐츠가 포함될 수 있으므로 자동으로 높이를 원합니다.

패딩/테두리가있는 요소가있는 div에서이 축소 전환을 어떻게 구현할 수 있습니까?

정말 환영받을 바이올린을 업데이트하면 대답을 증명할 수 있습니다.

Answer 1

, 최적의 솔루션을 설정 I padding과 border-width를 0으로 천이하는 것이 발견되었지만, 왼쪽과 오른쪽 만, 위쪽과 아래쪽은 변하지 않았습니다. 이렇게하면 붕괴가 너비에있는 것으로 나타나고 div는 높이를 전혀 변경하지 않습니다.

는

.section.collapsible { 
    opacity: 1; 
    transition: opacity linear 1s, width linear 1s; 
} 

.section.collapsible.collapsed { 
    width: 0; 
    opacity: 0; 
} 

.section.collapsible .sub-section {  
    padding: 10px; 
    border-width: 2px; 
    transition: padding linear 1s, border-width linear 1s; 
} 

.section.collapsible.collapsed .sub-section {  
    padding: 10px 0; 
    border-width: 2px 0; 
} 

데모 : http://jsfiddle.net/p38b6ndb/6/

이 또한 내가 여전히뿐만 아니라 box-sizing: border-box를 사용할 수 있다는 것을 의미합니다.

Answer 2

시도는 '패딩 : 0'으로 설정하는 각 .collapsed> 하위 섹션 국경 박스에, 물론 전환 지금까지 demo

.section.collapsible .sub-section-border-box {  
    padding: 10px; 
    border-width: 2px; 
    transition: all linear 1s; 
} 

.section.collapsible.collapsed .sub-section-border-box{  
    padding: 0; 
    border-width: 0; 
}