bradberger/demo.js

## demo.js
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      position: fixed;
      bottom: 0;
      left: 0;
    }
    .box {
      background: #444;
      color: #fff;
      padding: 1em;
      margin-top: 6px;
      display: block;
      position: relative;
      transition: 50ms ease-in-out all;
      box-sizing: border-box;
      left: 0;
    }
    .done {
      left: -100%;
    }
    .hide {
      margin: 0;
      height: 0;
      padding: 0 1em;
    }
  </style>
</head>
<body ng-controller="testCtrl">

  <div>
    <button ng-click="add()">Add</button>
    <button ng-click="remove()">Remove</button>
  </div>

  <div class="container">
    <div class="box" ng-repeat="box in boxes" ng-class="{ hide: box.hidden, done: box.done }" ng-click="box.done = true">{{ box.text }}</div>
  </div>

  <script>
    angular.module("testApp", []).controller("testCtrl", function($scope, $timeout) {

      var TRANSITION_DURATION = 50;

      $scope.boxes = [];

      $scope.add = function() {
        $scope.boxes.push({ hidden: true, text: "Hello, world" });
        $timeout(function() {
          $scope.boxes[$scope.boxes.length - 1].hidden = false;
        }, TRANSITION_DURATION);

      };

      $scope.remove = function() {
        if($scope.boxes.length) {
          $scope.boxes[0].done = true;
          $timeout(function() {
            $scope.boxes.splice(0, 1);
          }, TRANSITION_DURATION);
        }
      };

    });
  </script>


</body>
</html>
	<!DOCTYPE html>
	<html ng-app="testApp">
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<style>
	.container {
	position: fixed;
	bottom: 0;
	left: 0;
	}
	.box {
	background: #444;
	color: #fff;
	padding: 1em;
	margin-top: 6px;
	display: block;
	position: relative;
	transition: 50ms ease-in-out all;
	box-sizing: border-box;
	left: 0;
	}
	.done {
	left: -100%;
	}
	.hide {
	margin: 0;
	height: 0;
	padding: 0 1em;
	}
	</style>
	</head>
	<body ng-controller="testCtrl">

	<div>
	<button ng-click="add()">Add</button>
	<button ng-click="remove()">Remove</button>
	</div>

	<div class="container">
	<div class="box" ng-repeat="box in boxes" ng-class="{ hide: box.hidden, done: box.done }" ng-click="box.done = true">{{ box.text }}</div>
	</div>

	<script>
	angular.module("testApp", []).controller("testCtrl", function($scope, $timeout) {

	var TRANSITION_DURATION = 50;

	$scope.boxes = [];

	$scope.add = function() {
	$scope.boxes.push({ hidden: true, text: "Hello, world" });
	$timeout(function() {
	$scope.boxes[$scope.boxes.length - 1].hidden = false;
	}, TRANSITION_DURATION);

	};

	$scope.remove = function() {
	if($scope.boxes.length) {
	$scope.boxes[0].done = true;
	$timeout(function() {
	$scope.boxes.splice(0, 1);
	}, TRANSITION_DURATION);
	}
	};

	});
	</script>




	</body>
	</html>