AngularJS ngHide animation example.

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <title>AngularJS ngHide sample</title>
  <link href="http://ajax.aspnetcdn.com/ajax/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet" />
  <link href="style.css" rel="stylesheet" />
</head>

<body>
  <div>
    <div>
      <button ng-click="disabled = !disabled">Toggle ngHide animation</button>
      <div ng-hide="disabled" class="ngHideSample bg-success">
        This element has the ng-hide directive.
      </div>
    </div>
  </div>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-animate.min.js"></script>
  <script src="script.js"></script>
</body>

</html>

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

/* ngHide animation */
.ngHideSample {
  padding: 10px;
  margin: 5px;
}
.ngHideSample.ng-hide-add {
  -webkit-transition: all linear 0.3s;
  -moz-transition: all linear 0.3s;
  -ms-transition: all linear 0.3s;
  -o-transition: all linear 0.3s;
  opacity: 1;
}
.ngHideSample.ng-hide-add-active {
  opacity: 0;
}
.ngHideSample.ng-hide-remove {
  -webkit-transition: all linear 0.3s;
  -moz-transition: all linear 0.3s;
  -ms-transition: all linear 0.3s;
  -o-transition: all linear 0.3s;
  opacity: 0;
}
.ngHideSample.ng-hide-remove-active {
  opacity: 1;
}

The ngShow directive uses the same convention; the only difference is that each
directive has the opposite behavior for the model value. When the model is true ,
ngShow removes the ng-hide class and ngHide adds the ng-hide class