AngularJS动画使隐藏元素在加载页面时显示_Angularjs_Angularjs Animation

AngularJS动画使隐藏元素在加载页面时显示

angularjs

AngularJS动画使隐藏元素在加载页面时显示,angularjs,angularjs-animation,Angularjs,Angularjs Animation,我在指令中有一个隐藏的组件，但是当加载页面时，隐藏的元素会在动画期间出现，只有当组件的模型设置为可见时才会触发在本例中，我将组件永久设置为ng hide=“true”，当加载页面时，它仍会出现半秒钟。在我的实际程序中，指令要复杂得多，所以我把模板放在它自己的文件中，如果我把它放在一个字符串中，问题就不会出现我尝试将style=“display:none”添加到模板的内容中，但随后它对模型更改没有反应 <html ng-app="myApp"> <head> &

我在指令中有一个隐藏的组件，但是当加载页面时，隐藏的元素会在动画期间出现，只有当组件的模型设置为可见时才会触发

在本例中，我将组件永久设置为ng hide=“true”，当加载页面时，它仍会出现半秒钟。在我的实际程序中，指令要复杂得多，所以我把模板放在它自己的文件中，如果我把它放在一个字符串中，问题就不会出现

我尝试将style=“display:none”添加到模板的内容中，但随后它对模型更改没有反应

<html ng-app="myApp">
<head>
    <style>
    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: black;

        transition: all linear 0.5s;
    }
    .overlay.ng-hide {
        opacity: 0;
    }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular-animate.min.js"></script>
    <script>
    angular.module("myApp", ['ngAnimate'])
        .directive("overlay", function() {
            return {
                replace: true,
                templateUrl: "overlay.html"
            };
        });
</script>
</head>
<body>
    <overlay></overlay>
</body>
</html>


.覆盖{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景色：黑色；
过渡：全线性0.5s；
}
.ng-hide{
不透明度：0；
}
angular.module（“myApp”，['ngAnimate']））
.指令（“覆盖”，函数（）{
返回{
替换：正确，
templateUrl:“overlay.html”
};
});

overlay.html：

<div class="overlay" ng-hide="true"></div>

Plunker:

您可以添加一个链接函数，通过观察

ng hide

初始值，然后删除

display:none

属性并注销属性，将

ng hide

属性临时添加到覆盖元素中，然后在

ng hide

指令生效时删除该属性观察者

大概是这样的：

    .directive("overlay", function() {
        return {
            templateUrl: "overlay.html",
            link: function(scope, elem, attr) {
              elem.css('display', 'none');
              var dereg = scope.$watch(attr.ngHide, function(value) {
                elem.css('display', '');
                dereg();
              });
            }
        };
    });

请注意，我已经删除了

replace

属性，它在angular 3.0及更高版本中被折旧

您可以使用

ng类

来做相反的事情。切换CSS，使覆盖仅在添加类时显示

show

：

    .directive("overlay", function() {
        return {
            templateUrl: "overlay.html",
            link: function(scope, elem, attr) {
              elem.css('display', 'none');
              var dereg = scope.$watch(attr.ngHide, function(value) {
                elem.css('display', '');
                dereg();
              });
            }
        };
    });

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0;

    transition: all linear 0.5s;
}
.overlay.show {
    opacity: 1;
}

然后只需在覆盖上使用

ng class

指令，将

false

值更改为您想要的任何表达式

<div class="overlay" ng-class="{show : false}"></div>

这是

这可能是更优雅的解决方案，谢谢。