repeatAnimation2

Advanced nav service

by long2know

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-loader.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-touch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui-ieshiv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<div ng-controller="myCtrl as vm">
    <ul class="itemlist">
        <li ng-repeat="item in vm.items" class="new-list-item" on-repeat-finish>
            <span ng-bind="item.name" />
        </li>
    </ul>
    <button ng-click="vm.addItem()">Add Item</button>
</div>

CSS

.itemlist {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: white;
    height: 100%;
    width: 100%;
}

.itemlist > li {
    line-height: 1.4em;
    background-color: white;
    color: black;
    cursor: pointer;
    padding: 6px 0 6px 5px;
}

.new-item {
    background-color: red !important;
    overflow: none;
}

JavaScript

(function () {
    angular.module('myApp.services', ['ngResource', 'ngAnimate']);
    angular.module('myApp.directives', []);
    angular.module('myApp.controllers', []);

    var myApp = angular.module('myApp', [
        'myApp.services',
        'myApp.controllers',
        'myApp.directives',
        'ngSanitize',
        'ngAnimate',
        'ui.bootstrap',
        'ui']);

    var myController = function ($scope, $timeout, $animate, $log) {               
        var vm = this,
            initItems = function() {
                vm.items = [];
                for (var i = 0; i < 10; i++) {
                    vm.items.push({ name: "Item " + i.toString() });
                }
            },
            init = function() {
                $timeout(function() { setTimeout(initItems(), 2000) }, 0);
            };
        
        vm.addItem = function() {
            vm.items.push({ name: "Item " + vm.items.length.toString() });
        };

        $animate.enabled(false);
        
        var listener = $scope.$on('ngRepeatFinished', function () {
            $log.log("Message received - turning animations on");
            $animate.enabled(true);
            
            $log.log("Unregistering listener");
            listener();
            listener = null;
        });
        
        init();
    };
    
    var newItem = function ($timeout, $log) {
        var animation = {
            enter: function (element, done) {
                element.addClass('new-item');
                $timeout(function () {
                    element.removeClass('new-item');
                    done();
                }, 2000);
            }
        };

        return animation;
    };
    
    var onRepeatFinish = function ($timeout, $log) {
        var directive = {
            restrict: 'A',
            link: function (scope, element, attr) {
                if (scope.$last === true) {
                    $timeout(function () {
                        $log.log("Repeat...