표시하기 전에 공간을 차지하는 요소를 방지하십시오.

Question

한 곳에서 두 요소 사이를 전환하고 싶습니다. 전환 할 때 현재 요소가 사라지고 그 후 다음 요소가 사라져서 이전 요소가 대체됩니다. 그래서이 효과를 얻으려면 .ng-hide-remove에 대한 지연 시간을 설정합니다.

그러나 다음 요소가 나타나기 전에 DOM의 공간을 차지하고 페이지의 레이아웃이 깨집니다.

어떻게 해결할 수 있습니까?

다음은 바이올린 링크입니다 : fiddle

CSS :

div { 
    transition: all linear 0.5s; 
} 

#div1 { 
    background-color: lightblue; 
} 

#div2 { 
    background-color: lightgreen; 
} 

.ng-hide-remove { 
    transition-delay: 0.5s; 
} 

.ng-hide { 
    opacity: 0; 
} 

HTML :

<h1>Switch the DIVs: <input type="checkbox" ng-model="myCheck"></h1> 

<div id="div1" ng-hide="myCheck">Div 1</div> 
<div id="div2" ng-hide="!myCheck">Div 2</div> 

Answer 1

당신은 당신의 사업부에 전환이 필요하지 않습니다. 주석 처리 된 전환과 함께 여기에 두드린 바이올린을보십시오.

div { 
// transition: all linear 0.5s; 
}