movibe/jsbin.usaruce.html

## jsbin.usaruce.html
<!DOCTYPE html>
<html ng-app="animTodo">
<head>
<meta name="description" content="A demonstration of Angular 1.2 with Animate.css" />
  <meta charset=utf-8 />
  <title>Angular 1.2 and Animate.css</title>
  <link rel="stylesheet" href="//djyhxgczejc94.cloudfront.net/frameworks/bootstrap/3.0.0/themes/white-plum/bootstrap.min.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/2.0/animate.min.css">
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-animate.min.js"></script>
</head>
<body ng-controller="TodoCtrl">
  <div class="container">
  <h1 class="page-header text-center">Animate.css + Angular 1.2</h1>

    <form ng-submit="addTodo(newTodo)">
      <input type="text" ng-model="newTodo" class="form-control" placeholder="New todo item goes here, then press Enter" focus>
    </form>
    <br>

    <div class="list-group">
      <div class="list-group-item todo-item" ng-repeat="item in items" ng-class="{'todo-complete': item.complete}">
        <span class="close" ng-click="removeTodo($index)">&times;</span>
        <label>
          <input type="checkbox" ng-model="item.complete">
          <span ng-bind="item.text">This is the content of the Todo</span>
        </label>
      </div>
    </div>
    <button class="btn btn-block btn-danger" ng-click="clearAll()">Clear All Items</button>
  </div>
</body>
</html>

## jsbin.usaruce.js
var app = angular.module("animTodo", ["ngAnimate"]);

app.controller("TodoCtrl", function($scope) {
  $scope.items = [{text: "This is a demo todo.", complete: true}];
  $scope.newTodo = "";

  $scope.addTodo = function() {
    console.log($scope.newTodo);
    $scope.items.push({text: $scope.newTodo, complete: false});
    $scope.newTodo = "";
  };

  $scope.removeTodo = function(index) {
    $scope.items.splice(index, 1);
  };

  $scope.clearAll = function() {
    $scope.items = [];
  };
});

## jsbin.usaruce.less
.todo-item {
  -webkit-transition: color 0.6s, background-color 0.3s;
  -moz-transition: color 0.6s, background-color 0.3s;
  -ms-transition: color 0.6s, background-color 0.3s;
  transition: color 0.6s, background-color 0.3s;

  label {
    display: block;
  }

  &.ng-enter {
    -webkit-animation: fadeInLeft 1s;
    -moz-animation: fadeInLeft 1s;
    -ms-animation: fadeInLeft 1s;
    animation: fadeInLeft 1s;
  }

  &.ng-leave {
    -webkit-animation: bounceOut 1s;
    -moz-animation: bounceOut 1s;
    -ms-animation: bounceOut 1s;
    animation: bounceOut 1s;
  }
}

.todo-complete {
  background: #f3f3f3;
  color: #777;

  label {
    text-decoration: line-through;
  }
}
	<!DOCTYPE html>
	<html ng-app="animTodo">
	<head>
	<meta name="description" content="A demonstration of Angular 1.2 with Animate.css" />
	<meta charset=utf-8 />
	<title>Angular 1.2 and Animate.css</title>
	<link rel="stylesheet" href="//djyhxgczejc94.cloudfront.net/frameworks/bootstrap/3.0.0/themes/white-plum/bootstrap.min.css">
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/2.0/animate.min.css">
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-animate.min.js"></script>
	</head>
	<body ng-controller="TodoCtrl">
	<div class="container">
	<h1 class="page-header text-center">Animate.css + Angular 1.2</h1>

	<form ng-submit="addTodo(newTodo)">
	<input type="text" ng-model="newTodo" class="form-control" placeholder="New todo item goes here, then press Enter" focus>
	</form>
	<br>

	<div class="list-group">
	<div class="list-group-item todo-item" ng-repeat="item in items" ng-class="{'todo-complete': item.complete}">
	<span class="close" ng-click="removeTodo($index)">×</span>
	<label>
	<input type="checkbox" ng-model="item.complete">
	<span ng-bind="item.text">This is the content of the Todo</span>
	</label>
	</div>
	</div>
	<button class="btn btn-block btn-danger" ng-click="clearAll()">Clear All Items</button>
	</div>
	</body>
	</html>
	var app = angular.module("animTodo", ["ngAnimate"]);

	app.controller("TodoCtrl", function($scope) {
	$scope.items = [{text: "This is a demo todo.", complete: true}];
	$scope.newTodo = "";

	$scope.addTodo = function() {
	console.log($scope.newTodo);
	$scope.items.push({text: $scope.newTodo, complete: false});
	$scope.newTodo = "";
	};

	$scope.removeTodo = function(index) {
	$scope.items.splice(index, 1);
	};

	$scope.clearAll = function() {
	$scope.items = [];
	};
	});
	.todo-item {
	-webkit-transition: color 0.6s, background-color 0.3s;
	-moz-transition: color 0.6s, background-color 0.3s;
	-ms-transition: color 0.6s, background-color 0.3s;
	transition: color 0.6s, background-color 0.3s;

	label {
	display: block;
	}

	&.ng-enter {
	-webkit-animation: fadeInLeft 1s;
	-moz-animation: fadeInLeft 1s;
	-ms-animation: fadeInLeft 1s;
	animation: fadeInLeft 1s;
	}

	&.ng-leave {
	-webkit-animation: bounceOut 1s;
	-moz-animation: bounceOut 1s;
	-ms-animation: bounceOut 1s;
	animation: bounceOut 1s;
	}
	}

	.todo-complete {
	background: #f3f3f3;
	color: #777;

	label {
	text-decoration: line-through;
	}
	}