AngularJS ngIf fade animation example.

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

<head>
  <title>AngularJS ngIf sample</title>
  <link href="style.css" rel="stylesheet" />
</head>

<body>
  <div ng-controller="animationsCtrl">
    <div>
      fadeAnimation value: {{fadeAnimation}}
    </div>
    <button ng-click="fadeAnimation = !fadeAnimation">Toggle fade</button>
    <div ng-if="fadeAnimation" class="animationIf">
      This element appears when the fadeAnimation model is true
    </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']);

app.controller('animationsCtrl', function($scope) {
  $scope.fadeAnimation = false;
});

/* ngIf animation */
.animationIf.ng-enter,
.animationIf.ng-leave {
  -webkit-transition: opacity ease-in-out 1s;
  -moz-transition: opacity ease-in-out 1s;
  -ms-transition: opacity ease-in-out 1s;
  -o-transition: opacity ease-in-out 1s;
  transition: opacity ease-in-out 1s;
}
.animationIf.ng-enter,
.animationIf.ng-leave.ng-leave-active {
  opacity: 0;
}
.animationIf.ng-leave,
.animationIf.ng-enter.ng-enter-active {
  opacity: 1;
}