Angular ng-animate

by TheoI

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
<div ng-controller="App">
    <button ng-click="add()">Add</button>
    <ul>
        <li ng-animate="{enter: 'repeat-enter',
                        leave: 'repeat-leave',
                        move: 'repeat-move'}" ng-click="remove($index)" ng-repeat="name in names">{{name}}</li>
    </ul>
</div>

CSS

.repeat-enter-setup, .repeat-leave-setup, .repeat-move-setup {
    -webkit-transition:all linear 1s;
    -moz-transition:all linear 1s;
    -ms-transition:all linear 1s;
    -o-transition:all linear 1s;
    transition:all linear 1s;
}
.repeat-enter-setup {
    max-height: 0;
    opacity:0;
}
.repeat-enter-setup.repeat-enter-start {
    max-height: 250px;
    opacity:1;
}
.repeat-leave-setup {
    opacity:1;
    max-height: 250px;
}
.repeat-leave-setup.repeat-leave-start {
    opacity:0;
    max-height: 0;
}
.repeat-move-setup {
}
.repeat-move-setup.repeat-move-start {
}

JavaScript

angular.module('MyApp', []);

function App($scope) {
    $scope.names = [];
    var data = [];
    for (var i = 0; i < 100; i++) {
        data.push('item' + i)
    }
    $scope.add = function () {
        if (data.length) $scope.names.splice(0, 0, data.pop());
    };
    $scope.remove = function (index) {
        $scope.names.splice(index, 1);
    };
}