AngularJS array change animation under ng-repeat.

How can add animation to the add and remove operations.

by unimous

HTML

<div ng-app="myApp">
    <div ng-controller="myController">
        <button ng-click="add()">add</button>
        <button ng-click="remove()">remove</button>
        <hr/>
        <div class="item" ng-repeat="e in array">
            {{e}}
        </div>
        <hr/>
    </div>
</div>

CSS

.item {
    margin: 5px;
    border: 1px #428bca solid;
    background-color: #5cb85c;
    color: white;
    
    -webkit-transition:all linear 0.5s;
    transition:all linear 0.5s;
}

JavaScript

app = angular.module('myApp', []);

app.controller('myController', function($scope) {
    $scope.array = [1, 2, 3];
    $scope.counter = 3;
    
    $scope.add = function() {
        $scope.counter++;
        $scope.array.push($scope.counter);
    }
    
    $scope.remove = function() {
        if($scope.array.length == 0) {
            return;
        }
        $scope.array.splice(0, 1);
    }
    
});