Angular: Empty Fiddle

http://angularjs.org/

by noducks

HTML

<script src="http://code.angularjs.org/1.2.9/angular.js"></script>
<script src="http://code.angularjs.org/1.2.9/angular-animate.js"></script>
<div ng-controller="MyCtrl" style="text-align: center">
    <div ng-repeat="elem in elements" ng-class="elem.anim">
       <button ng-click="out(elem, 'left', $index)">Left</button>
       <button ng-click="out(elem, 'right', $index)">Right</button>
    </div>
</div>

CSS

.left.ng-leave {
      -webkit-transition:all linear 1s;
      transition:all linear 1s;
    }
     
    .left.ng-leave.ng-leave-active{
        -ms-transform: translateX(-100%); 
        -o-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
     
    .left.ng-leave {
      -ms-transform: translateX(0%); 
      -o-transform: translateX(0%);
      -moz-transform: translateX(0%);
      -webkit-transform: translateX(0%);
      transform: translateX(0%);
    }
     
    .right.ng-leave {
        -webkit-transition:all linear 1s;
        transition:all linear 1s;
    }
     
    .right.ng-leave.ng-leave-active {
        -ms-transform: translateX(100%); 
        -o-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
     
    .right.ng-leave {
        -ms-transform: translateX(0%); 
        -o-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }

JavaScript

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

function MyCtrl($scope) {
    $scope.elements = [
        {anim: ''},
        {anim: ''},
        {anim: ''},
        {anim: ''},
        {anim: ''}
    ];
    
    $scope.out = function(elem, direc, index) {
        elem.anim = direc;
        $timeout(function(){
           $scope.elements.splice(index, 1);
        });
    };
}