AngularJS动画在加载页面时显示隐藏元素(AngularJS animation makes hidden element appear when the page is loaded)

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

在这个例子中，我将组件永久地设置为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>

overlay.html：

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

I have a hidden component in a directive and yet when the page is loaded, the hidden element appears for the duration of the animation, which should only be triggered when the component's model is set to visible.

In this example I set the component to ng-hide="true" permanently, and when the page is loaded it still appears for half a second. In my real program the directive is much more complicated, so I placed the template in its own file, the problem doesn't appear if I just put it in a string.

I tried adding style="display:none" to the template's content, but then it doesn't react to model changes later.

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

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

最满意答案

你可以使用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值更改为您想到的任何表达式。

这是Forked Plunker

You could do the opposite using ng-class instead. Switch your CSS so the overlay only shows when you add a class 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; }

Then just use the ng-class directive on your overlay, change the false value to whatever expression you have in mind.

Here's the Forked Plunker

更多推荐