repeatAnimation1

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 track by $index" class="new-list-item">
            <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.controllers', []);
    angular.module('myApp.directives', []);

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

    var myController = function ($timeout, $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(), 1000) }, 0);
        };
        
        vm.addItem = function() {
            vm.items.push({ name: "Item " + vm.items.length.toString() });
        };
        
        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;
    };
    
    newItem.$inject = ['$timeout' , '$log'];
    angular.module('myApp.services')
        .animation('.new-list-item', newItem);
    
    myController.$inject = ['$timeout', '$log'];
    angular.module('myApp.controllers')
        .controller('myCtrl', myController);

    myApp.config(['$modalProvider', '$locationProvider',
        function ($modalProvider, $locationProvider) {
            $modalProvider.options = { dialogFade: true, backdrop: 'static', keyboard: false };
            $locationProvider.html5Mode(false);
        }]);

    myApp.run(['$log', function ($log) { $log.log("Start."); }]);
})()