Marilou Marilou - 5 months ago 30
AngularJS Question

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

My code looks like this:

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

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.

  • 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: {
      opacity: 0;
    }, {
      display: block !important;
    } {
      transition: all linear 1000ms;
    } {
      transition: all linear 500ms;
  • Add the class to your element:

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