AngularJS Add/Remove Transitions

If you want to animate the injection and removal of DOM elements, this is a not unreasonable way to go about it.

by gavinfoley

HTML

<div ng-controller="App">
<button ng-click="add()">Add</button>
<ul>
    <li animate remove="remove($index)" ng-repeat="name in names">{{name}}</li>
</ul>
</div>

SCSS

li {
    transition: all ease 0.2s;
    -moz-transition: all ease 0.2s;
    -webkit-transition: all ease 0.2s;
    -o-transition: all ease 0.2s;
    overflow: hidden;
    max-height: 0;
    background: blue;
    margin: 0 10px;
    padding: 0 10px;
    &.show {
        max-height: 100px;        
        margin: 10px;        
        padding: 10px;        
    }
}

JavaScript

angular.module('MyApp', []).directive('animate', function(){
    return function(scope, elm, attrs) {
        setTimeout(function(){
            elm.addClass('show');
        });
    };
}).directive('remove', function(){
    return function(scope, elm, attrs) {
        elm.bind('click', function(e){
            e.preventDefault();
            elm.removeClass('show');
            setTimeout(function(){
                scope.$apply(function(){
                    scope.$eval(attrs.remove);
                });
            }, 200);                    
        });
    };
});

function App($scope) {
    $scope.names = [];
    var data = ['Dean', 'Andy', 'Dan', 'Wizek', 'Pete', 'Pawel', 'Chris', 'Misko'];
    $scope.add = function() {
        if (data.length)
            $scope.names.push(data.pop());
    };
    $scope.remove = function(index) {
        data.push($scope.names.splice(index, 1)[0]);
    };
}