Question

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

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

我尝试将 style =＆＃34; display：none＆＃34; 添加到模板的内容中，但之后它不会对模型更改做出反应。

<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>

overlay.html：

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

Plunker：http://plnkr.co/edit/tYLkGwPJtFPxH2ES6qIe?p=preview

Answer 1

您可以添加一个链接函数，该函数会暂时向overlay元素添加display: none属性，然后在ng-hide指令通过观察ng-hide初始值然后删除后启动后删除display: none属性并取消注册观察者。

这样的事情：的 FORKED PLUNKER

.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属性，它在角度3.0及更高版本中折旧。的 Reference

Answer 2

您可以使用ng-class执行相反的操作。切换您的CSS，以便仅在添加课程show时显示叠加层：

.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>

这是Forked Plunker

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

2 个答案: