AngularJS - jQuery Fade Ex.

http://angularjs.org/

by gavinfoley

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc8.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;
   background: yellow;
}
li.ui-animate-out {
    transition: none;
    -o-transition: none;
    -moz-transition: none;
    -webkit-transition: none;
}

JavaScript

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

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 () {
    
    var link = function (scope, ele, attrs) {
            var duration = parseInt(attrs.fadey);
            if (isNaN(duration)) {
                duration = 500;
            }
            
            ele.addClass('ui-animate')
            .slideDown(duration, function () {
                ele.removeClass('ui-animate');
            });

            scope.destroy = function (complete) {
                ele.addClass('ui-animate-out').slideUp(duration, function () {
                    if (complete) {
                        complete.apply(scope);
                    }
                });
            };
        };
    
    return {
        restrict: 'A',
        link: 
    };
});