4

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>

I also already have the ngAnimate dependancy included as well.

var app = angular.module("app", ["ngAnimate"]);
Mistalis
  • 17,793
  • 13
  • 73
  • 97
RichC
  • 7,829
  • 21
  • 85
  • 149

4 Answers4

10

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

Mistalis
  • 17,793
  • 13
  • 73
  • 97
2

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.

Community
  • 1
  • 1
Erazihel
  • 7,295
  • 6
  • 30
  • 53
1

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

Pramod_Para
  • 671
  • 3
  • 10
1

Simply use the fade class in your div and add a button to toggle your condition to see the animation on hide. You can use your own condition in 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>
Kamesh
  • 1,122
  • 9
  • 12