How can I fade in and out the visibility of a DIV using ng-show with AngularJS 1.3 beta?

Question

My code looks like this:

<div class="block-border"
     data-ng-show="qty > 0">
   xxx
</div>

I know there have been a lot of changes with Animation in AngularJS. Can someone tell me the easiest way for me to make it take 500ms to show and 50ms to hide the xxx when the value of qty changes. Note that I am using the very latest AngularJS.

Answer 1

• Reference angular-animate.js

• Add ngAnimate as a dependent module:

  var app = angular.module('app', ['ngAnimate']);
  

• Pick a name for your transition, for example 'fade', and then define the appropriate CSS classes based on the naming convention described in the documentation:

  .fade.ng-hide {
    opacity: 0;
  }
  
  .fade.ng-hide-remove,
  .fade.ng-hide-add {
    display: block !important; /* or inline-block, as appropriate */
  }
  
  .fade.ng-hide-remove {
    transition: all linear 1000ms;
  }
  
  .fade.ng-hide-add {
    transition: all linear 500ms;
  }
  

• Add the class to your element:

  <div class="block-border fade" ng-show="qty > 0">
  

Demo: http://plnkr.co/edit/HWi0FfDOsHeSOkcrRtN2?p=preview

Answer 2

I couldn't get the accepted answer to work, but the following did work (taken largely from this ng-nuggets post):

.fade {
    transition: all linear 500ms;
    opacity: 1;
}

.fade.ng-hide {
    opacity: 0;
}

and then my HTML element which I wanted to fade in and out looked something like this:

<span data-ng-show="copyLinkClicked" class="fade">some text here</span>

As @MichaelNguyen mentioned, Bootstrap does appear to have a style already called fade, and we are using Bootstrap in our application, yet the above styles worked nonetheless. If you already have a style named fade, then change the name to something unique before using the above code.

Answer 3

If you want to fade in using ng-if as a boolean angular has some nice documentation here https://docs.angularjs.org/api/ngAnimate . I used ng-if for my fading purposes here's an example below:

form.html

<form name="exampleForm" ng-submit="submit()">
  <input type="email" placeholder="Email Address" ng-model="email" required>
  <input type="text" placeholder="Name" ng-model="name" required>
  <input class="invalid-btn" ng-if="exampleForm.$invalid" type="submit" value="Invalid" />
  <input class="valid-btn" ng-if="exampleForm.$valid" type="submit" value="Valid">
</form>

form.css

/* css for button that will show when form is invalid */
.invalid-btn {
  border: 1px solid #222;
  width: 100px;
  height: 50px;
  color: #222;
  background: #fff;
}

.invalid-btn.ng-enter {
  opacity: 1;
}

/* The finishing CSS styles for the enter animation */
.invalid-btn.ng-enter.ng-enter-active {
   opacity: 0;
}

.valid-btn {
  width: 100px;
  height: 50px;
  background: #F26623;
  color: #fff;
}

/* The starting CSS styles for the enter animation */
.valid-btn.ng-enter {
  transition:0.5s linear all;
  opacity: 0;
}

.valid-btn.ng-enter-stagger {
  /* this will have a 100ms delay between each successive leave animation */
  transition-delay: 0.3s;

  /* As of 1.4.4, this must always be set: it signals ngAnimate
to not accidentally inherit a delay property from another CSS class */
  transition-duration: 0s;
}

 /* The finishing CSS styles for the enter animation */
.valid-btn.ng-enter.ng-enter-active {
  width: 100px;
  height: 50px;
  background: #F26623;
  color: #fff;
  opacity:1;
}

The way this works is if you want to fade in a button with a different color or text and different text color you can fade in a button when the form is filled out and valid and the invalid button will fade out leaving only one button depending on the state of the form. Kind of a hack but it works and looks smooth. I had to set a delay using .ng-enter-stagger because loading the animations at the same time was causing the buttons to blink and jump and not animate smoothly. So in this case we let invalid button hide first then load valid button when form is valid and all input fields have been filled out correctly.