AngularJS - Animation and SVG

Simple example for StackOverflow

by Amaury Dalla Monta

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-animate.min.js"></script>
<div ng-app="MyApp" ng-controller="MyCtrl">
    <svg xmlns="http://www.w3.org/2000/svg" width="200" height="100">
        <rect data-ng-repeat="item in itemsList" width="10" height="50" fill="gold" data-ng-attr-x="{{$index*15}}" class="animation" />
    </svg>
    <button ng-click="addItem()">Add an item</button>
    <div>
        <div data-ng-repeat="item in itemsList" class="animation">[{{$index}}] {{item}}</div>
    </div>
</div>

CSS

.animation.ng-enter, .animation.ng-leave {
    transition-property: opacity;
    transition-duration: 2000ms;
}
.animation.ng-enter.ng-enter-active, .animation.ng-leave {
    opacity: 1;
}
.animation.ng-enter, .animation.ng-leave.ng-leave-active {
    opacity: 0;
}

JavaScript

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

function MyCtrl($scope) {
    $scope.itemsList = [];
    
    $scope.addItem = function ()
    {
        $scope.itemsList.push(Math.floor(Math.random() * 1000));
    };
}