Angular 1.2: ngAnimate

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js.map"></script>
<script src="http://code.angularjs.org/1.2.0-rc.3/angular-animate.min.js"></script>
<script src="http://code.angularjs.org/1.2.0-rc.3/angular-animate.min.js.map"></script>
<div ng-init="on=true">
  <button ng-click="on=!on">Toggle On/Off</button>
  <div class="my-special-animation" ng-if="on">
    This content should enter and leave, right?
  </div>
</div>

CSS

.my-special-animation.ng-animate {
  transition: all ease 0.4s;
  position: absolute;
}
 
 .my-special-animation.ng-enter {
  top: 200px;
  opacity: 0;
}
 
 .my-special-animation.ng-leave, 
 .my-special-animation.ng-enter.ng-enter-active {
  top: 0;
  opacity: 1;
}
 
 .my-special-animation.ng-leave.ng-leave-active {
  top: -200px;
  opacity: 0;
}

/* destination animations */
 .my-special-animation.ng-enter.ng-enter-active {
  background:blue;
}

JavaScript

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

/*function MyCtrl($scope) {
    $scope.name = 'right';
}*/