html - 如何正确覆盖 .ng-hide 类以改变隐藏/显示性质？

Question

当使用 ng-hide 或 ng-show 指令时 .ng-class 被添加或删除，因此 DOM 元素可见或不可见。

然而，它们有点被位置“移除”，例如，隐藏或显示两个连续的 div 元素一个在另一个之上。

<div ng-show="condition1">First div</div>
<div ng-show="condition2">Second div</div>

因此，如果 condition1 的计算结果为假，第一个 div 将被隐藏但是第二个 div 将占据刚刚隐藏的 div 所占据的位置。

我怎样才能避免这种情况？我只希望 DOM 元素不可见，但不想以某种方式移除。

第一个解决方法。

我尝试重写 .ng-hide 类，并为我想要这种效果的元素获取辅助类 only-hide:

.ng-hide.only-hide {
  visibility: hidden !important;
}

但目前还没有得到结果。

Answer 1

我通过设置以下二等方法实现了它:

.ng-hide.only-hide {

  visibility: hidden !important;
  display: block !important;
}

当 Angular 将 .ng-hide 设置为 display:none 时，我将其设为不可见但存在 设置 display:block.