Angular: Empty Fiddle

http://angularjs.org/

by Kevin_Granger

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc8.js"></script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<div ng-controller="MyCtrl">
  <ul>
      <li ng-repeat="item in items" fadey="200">
          {{item}}
          <a ng-click="removeItem(item)">X</a>
      </li>
  </ul>
  <hr />
  <button ng-click="addItem()">Add Item</button>    
</div>

CSS

li {
  transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
    
  background: lightblue;
  max-height: 50px; /* 1000px works too */
  overflow: hidden;
  padding: 5px;
}
li.ui-animate {
  opacity: 0;
  max-height: 0;
  padding: 0 5px;
}
li.ui-animate-out {
  transition: none;
  -o-transition: none;
  -moz-transition: none;
  -webkit-transition: none;
}

JavaScript

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

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

function MyCtrl($scope) {
    $scope.items = [0, 1, 2];

    $scope.addItem = function() {
        $scope.items.push((new Date()).getTime());
    };
    
    $scope.removeItem = function(item) {
        var idx = $scope.items.indexOf(item);
        if (idx !== -1) {
            //injected into repeater scope by fadey directive
            this.destroy(function() {
                $scope.items.splice(idx, 1);
            });
        }
    };
}

myApp.directive('fadey', function() {
    return {
        restrict: 'A',
        link: function(scope, elm, attrs) {
            var duration = parseInt(attrs.fadey);
            if (isNaN(duration)) {
                duration = 500;
            }
            elm = jQuery(elm);
            elm.addClass('ui-animate').slideDown(duration, function() {
              elm.removeClass('ui-animate');      
            });

            scope.destroy = function(complete) {
                elm.addClass('ui-animate-out').slideUp(duration, function() {
                    if (complete) {
                        complete.apply(scope);
                    }
                });
            };
        }
    };
});