Angular 1.2: ngAnimate

http://angularjs.org/

by perqa

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-enter {
  -webkit-transition:0.5s linear all;
  -moz-transition:0.5s linear all;
  -o-transition:0.5s linear all;
  transition:0.5s linear all;

  background:red;
}

/* 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';
}*/