Css 角度+；引导显示和隐藏，同时保留布局

有没有一种好方法可以添加和删除元素，而不会使页面回流并导致所有元素抖动

角度指令

ng show

和

ng hide

不保留布局

而课堂也没有

<div class="show">...</div>
<div class="hidden">...</div>

。。。
...

---

有没有一种好方法可以添加和删除元素而不会使页面回流并导致所有元素抖动？

ng hide

和

ng show

使用

display:none

您需要在CSS中为

可见性：隐藏添加新属性

 .element-hidden{
     visibility: hidden;
  }

然后将条件提供给ng指令-
ng类

e、 g

其中，
hideBox==true
是您要检查的条件。
@RahulPatil的答案是正确的，但有点不雅观。我建议继续使用
ng show
/
ng hide
，因为它更容易阅读（即继续使用相同的模式），并在CSS中为特定项目添加覆盖：

.keepInFlow.ng-hide {
   dislpay: block!important;
   visibility: hidden;
}

<div class="keepInFlow" ng-show="show">..</div>

.keepInFlow.ng-hide{
阻止！重要；
可见性：隐藏；
}
..

Angular还提到覆盖
ng hide
您正在寻找CSS
可见性属性，该属性使项不可见，但仍允许元素占用DOM上的空间。没有内置的角度指令可以执行此操作，因此您需要自己滚动

myApp.directive("visiblityOn", function(){
    return{
        restrict: "A",
        link: function(scope, element){
            scope.$watch('visibilityFlag', function(){
                element[0].style.visibility = scope.visibilityFlag ? "visible" : "hidden";
            });
        }
    }
});

以及与您的指令一起工作的相应控制器：

myApp.controller("myController", function($scope){

    $scope.visibilityFlag = true;

    $scope.changeVisibility = function(){
        $scope.visibilityFlag = !$scope.visibilityFlag;
    };

});

查看css转换。当然，但有时，您只想隐藏应用程序中的部分元素，而不想更改应用程序范围内的行为。这就是为什么我建议这个解决方案：-）它不是应用程序范围的。它以自定义类作为前缀，因此它仅适用于您选择的那些元素。如果没有隔离范围，则此指令不可重用
myApp.controller("myController", function($scope){

    $scope.visibilityFlag = true;

    $scope.changeVisibility = function(){
        $scope.visibilityFlag = !$scope.visibilityFlag;
    };

});