Como desvanecer o elemento usando ng-hide com AngularJS?
posso mostrar/esconder um elemento de acordo com uma condição booleana no meu controlador. Como posso apagar o elemento se a condição é verdadeira em vez de simplesmente escondê-lo instantaneamente?
<div id='conversion-image' ng-hide="pages.length > 0">
generating pages...
<br />
<img src='Images/ajax-loader-blue.gif' />
</div>
Também já incluí a dependência de nganimato.
var app = angular.module("app", ["ngAnimate"]);
4 answers
Pode fazê-lo com CSS e ng-animate
como se segue:
.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>
Tal como mencionado na documentação de AngularJS:
A sobrepor .ng-hide
Por omissão, a classe .ng-hide irá estilo o elemento com a visualização: nenhuma !importante. Se desejar alterar o comportamento de esconder com o ngShow/ngHide, poderá simplesmente sobrepor os estilos para a classe .ng-hide CSS. Repare que o selector que precisa de ser usado é de facto .ng-hide:não(.ng-hide-animate) para lidar com classes de animação extra que possam ser adicionadas.
Adicionar a seguinte classe = "animar-mostrar animar-esconder"
<div id='conversion-image' class="animate-show animate-hide" ng-
hide="model.transaction.selectedDocument.pages.length > 0">
generating pages...
<br />
<img src='Images/ajax-loader-blue.gif' />
</div>
Adicionar os estilos abaixo
<style>
.animate-show,.animate-hide {
-webkit-transition:all linear 1s;
-moz-transition:all linear 1s;
-ms-transition:all linear 1s;
-o-transition:all linear 1s;
transition:all linear 1s;
}
.animate-show.ng-hide-remove,
.animate-hide.ng-hide-add.ng-hide-add-active {
opacity: 0;
display: block !important;
}
.animate-hide.ng-hide-add,
.animate-show.ng-hide-remove.ng-hide-remove-active {
opacity: 1;
display: block !important;
</style>
Aqui está um exemplo de mergulho. http://plnkr.co/edit/VoWwmHK57wtuyGl6npr0?p=preview
Basta usar a classe de desvanecimento no seu div e adicionar um botão para alterar a sua condição para ver a animação ao esconder. Você pode usar a sua própria condição em ng-hide = "your_own_condition"
<div id='conversion-image' class="fade" ng-hide="condition">
generating pages...
<br />
<img src='Images/ajax-loader-blue.gif' />
</div>
<button ng-click="condition=!condition">Toggle</button>
<style>
.fade.ng-hide {
transition:0.5s linear all;
opacity:0;
}
</style>