Question

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

Answer 1

您不需要在div上进行转换。在这里看到分叉的小提琴，并将过渡注释掉。

JSFiddle

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

在出现之前防止元素占用空间

1 个答案: