防止元素在顯示前佔用空間

我想在一個地方切換2個元素。切換時，當前元素將淡出，之後，下一個元素將淡入以替換舊元素。所以我爲.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>

來源

2016-07-07 Lăng Bùi

你並不需要在你的DIV的過渡。在這裏看到分叉的小提琴，註釋掉過渡。

JSFiddle

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

來源

2016-07-07 10:11:31 Srijith

謝謝你，但我也想淡出效果。 –

我的建議是使用https://daneden.github.io/animate.css/。這樣你就不必親自去做。我可以稍後更新小提琴，但它很容易！你可以有一個ng-class，並根據'myCheck'添加所需的類名稱 – Srijith

謝謝，我會看看它。 –

防止元素在顯示前佔用空間

回答

相關問題