angular animations

by Richard Hunter

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-animate.js"></script>
<div class="container" ng-controller="MainCtrl">
    <div ng-repeat="item in items track by $index" class="foo repeated-item">{{ item }}</div>
    
    <button ng-click="addItem()">add</button>
    <button ng-click="removeItem()">remove</button>
</div>

CSS

.container {
    
    width : 400px;
    position : relative;
   
    overflow : hidden;
}
.foo {
    
    color : blue;
    background : green;
}

.foo.ng-enter {
    transition:0.5s linear all;
    background: red;
    position : relative;
    left : 100%;
    
    
}
.foo.ng-enter.ng-enter-active {
    
    left : 0;
     background : green;
    
}
.ng-move {
    transition:0.5s linear all;
    opacity:0;
}
.ng-move.ng-move-active {
    opacity:1;
}

JavaScript

angular.module('myapp', ['ngAnimate'])
.controller('MainCtrl', ['$scope', function($scope) {

    $scope.items = ['alpha', 'beta', 'gamma'];
    
    $scope.addItem = function() {
    
        $scope.items.push('delta');
    }
    $scope.removeItem = function() {
        $scope.items.pop();
    }



}]);


angular.bootstrap(document, ['myapp']);