防止元素在显示前占用空间

我想在一个地方切换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

谢谢，我会看看它。 –

防止元素在显示前占用空间

回答

相关问题