Angular: Empty Fiddle

http://angularjs.org/

by noducks

HTML

<script src="http://code.angularjs.org/snapshot/angular.js"></script>
<script src="http://code.angularjs.org/snapshot/angular-animate.js"></script>
<div ng-controller="MyCtrl">
    
    <br>Click 'Left' or 'Right', then 'Go'.<br><br>
    
    <div ng-repeat="elem in elements" ng-class="elem.anim">
       
       <button ng-click="out(elem, 'left')">Left</button>
        <button ng-click="go($index)">Go</button>
       <button ng-click="out(elem, 'right')">Right</button>
        {{elem.anim}}

    </div>

</div>

CSS

.left {
      position: relative;
      width: 100%;
    }

    .left.ng-leave {
      -webkit-transition:all linear 0.5s;
      transition:all linear 0.5s;
    }
     
    .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 {
      position: relative;
      width: 100%;
    }
     
    .right.ng-leave {
      -webkit-transition:all linear 0.5s;
      transition:all linear 0.5s;
    }
     
    .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.go = function(index) {
        $scope.elements.splice(index, 1);
    }
    
    $scope.out = function(elem, direc) {
        elem.anim = direc;
        
        //Works if I comment these two lines, but throws up errors. 
        //$scope.$apply();
        //$scope.go();
    };
}