Angular 1.2: ngAnimate

http://angularjs.org/

by TheoI

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-controller="MyCtrl">
    <input ng-model="filterText" />
  <ul>
      <li class="nga-default nga-fade" ng-repeat="item in items | filter:filterText">
          {{item}}
      </li>
  </ul>
</div>

CSS

.nga-default {
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}

.nga-fade.ng-enter {
  opacity: 0;
}
/* line 6, ../../app/styles/ngAnimate/animations/_nga.fade.base.scss */
.nga-fade.ng-enter.ng-enter-active {
  opacity: 1;
}
/* line 11, ../../app/styles/ngAnimate/animations/_nga.fade.base.scss */
.nga-fade.ng-leave.ng-leave-active {
  opacity: 0;
}
/* line 14, ../../app/styles/ngAnimate/animations/_nga.fade.base.scss */
.nga-fade.ng-leave {
  opacity: 1;
}
/* line 19, ../../app/styles/ngAnimate/animations/_nga.fade.base.scss */
.nga-fade.ng-move {
  opacity: 0;
}
/* line 22, ../../app/styles/ngAnimate/animations/_nga.fade.base.scss */
.nga-fade.ng-move.ng-move-active {
  opacity: 1;
}

JavaScript

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

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

function MyCtrl($scope) {
    $scope.items = ["1","2","3","4"];
}