如何使用AngularJS使用ng-hide淡出元素？ [英] How to fade out element using ng-hide with AngularJS?
本文介绍了如何使用AngularJS使用ng-hide淡出元素？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我当前可以根据控制器中的布尔条件显示/隐藏元素。如果条件为真，我怎么能淡出元素而不是立即隐藏它？
I can currently show/hide an element according to a boolean condition in my controller. How can I fade the element out if the condition is true instead of just instantly hiding it?
<div id='conversion-image' ng-hide="pages.length > 0">
generating pages...
<br />
<img src='Images/ajax-loader-blue.gif' />
</div>
我也已经包含了ngAnimate的依赖性。
I also already have the ngAnimate dependancy included as well.
var app = angular.module("app", ["ngAnimate"]);
推荐答案
你可以用CSS和<$ c $来做c> ng-animate 如下：
You can do it with CSS and ng-animate as the following:
.fade-out.ng-hide {
opacity: 0;
}
.fade-out.ng-hide-add, .fade-out.ng-hide-remove {
transition: all linear 0.5s;
}
.check-element {
border: 1px solid black;
opacity: 1;
padding: 10px;
}
<head>
<meta charset="UTF-8">
<link href="animations.css" rel="stylesheet" type="text/css">
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script src="//code.angularjs.org/snapshot/angular-animate.js"></script>
</head>
<body ng-app="ngAnimate">
Hide: <input type="checkbox" ng-model="checked" aria-label="Toggle ngHide"><br />
<div class="check-element fade-out" ng-hide="checked">
I fade out when your checkbox is checked.
</div>
</body>
Angular ng-hide docs
这篇关于如何使用AngularJS使用ng-hide淡出元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
