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" class="wrapper">
    
    <br>Click 'Correct' or 'Incorrect', then 'Go'.<br><br>
    
    <div ng-repeat="elem in elements" ng-class="elem.anim">
       
       <button ng-click="out(elem, 'correct')">Correct</button>
        <button ng-click="go($index)">Go</button>
       <button ng-click="out(elem, 'incorrect')">Incorrect</button>
        {{elem.anim}}

    </div>
    
    
</div>

CSS

.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    max-width: 1280px;
}



    .correct {
      left: 0px;
      position: relative;
      width: 100%;
    }


     
    .correct.ng-move,
    .correct.ng-enter,
    .correct.ng-leave {
      -webkit-transition:all linear 0.5s;
      transition:all linear 0.5s;
    }
     
    .correct.ng-leave.ng-leave-active{
      opacity:0;
      // max-height:0;
        -ms-transform: translateX(100%); 
        -o-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transform: translateX(100%);

    }
     
    .correct.ng-leave {

      -ms-transform: translateX(0%); 
      -o-transform: translateX(0%);
      -moz-transform: translateX(0%);
      -webkit-transform: translateX(0%);
      transform: translateX(0%);

      opacity:1;

    }



    .incorrect {
      list-style:none;
      box-sizing:border-box;
      position: relative;
      width: 100%;
    }
     

    .incorrect.ng-leave {
      -webkit-transition:all linear 0.5s;
      transition:all linear 0.5s;
    }
     
    .incorrect.ng-leave.ng-leave-active {
      opacity:0;
      // max-height:0;
            -ms-transform: translateX(-100%); 
            -o-transform: translateX(-100%);
            -moz-transform: translateX(-100%);
            -webkit-transform: translateX(-100%);
             transform: translateX(-100%);
    }
     
    .incorrect.ng-leave {
            -ms-transform: translateX(0%); 
            -o-transform: translateX(0%);
            -moz-transform: translateX(0%);
            -webkit-transform: translateX(0%);
             transform: translateX(0%);
             opacity:1;

    }

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;
        //$scope.$apply();
        //$scope.go();
    };
}