Verhindern, dass Element Platz belegt, bevor es angezeigt wird

Question

Ich möchte zwischen zwei Elementen an einer Stelle wechseln. Beim Umschalten wird das aktuelle Element ausgeblendet, und danach wird das nächste Element eingeblendet, um das alte Element zu ersetzen. Also habe ich eine Verzögerungszeit für den .ng-hide-remove gesetzt, um diesen Effekt zu bekommen.

Aber bevor das nächste Element angezeigt wird, belegt es Platz im DOM und bricht das Layout der Seite.

Wie kann ich das beheben? Hier

ist die Geige Link: 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

Sie brauchen nicht den Übergang auf div. Sieh die gegabelte Geige hier mit dem auskommentierten Übergang.

JSFiddle

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