How to fade out element using ng-hide with AngularJS?
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>
As mentioned in the AngularJS documentation:
Overriding .ng-hide
By default, the .ng-hide class will style the element with display: none !important. If you wish to change the hide behavior with ngShow/ngHide, you can simply overwrite the styles for the .ng-hide CSS class. Note that the selector that needs to be used is actually .ng-hide:not(.ng-hide-animate) to cope with extra animation classes that can be added.
Add the following class class="animate-show animate-hide"
<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>Add the styles below
<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>Here is a plunker example http://plnkr.co/edit/VoWwmHK57wtuyGl6npr0?p=preview