<!DOCTYPE html>
<html ng-app='myApp'>

  <head>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script data-require="angular-animate@*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular-animate.js"></script>
    <link rel="stylesheet" href="app.css" />
    <script src="app.js"></script>
  </head>

  <body ng-controller='AnimateController'>
    <h3>{{title}}</h3>
    
    <input type='text' ng-model='listElement'> 
    <button class='btn-success' ng-click='addToList()'>Add</button>
    
    <ul>
      <li class='animate-list' ng-repeat='item in list'>
        {{item.title}}
      </li>
    </ul>
    
  </body>

</html>

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


app.controller('AnimateController', ['$scope', '$timeout', function($scope, $timeout){
    $scope.title = 'First Step at Angular Animations!';
    
    $scope.addToList = function(){
      $scope.list.push({title: $scope.listElement});
    };
    
    $timeout(function(){
      $scope.list = [
        {title: 'hello World'}, 
        {title: 'hello World'}, 
        {title: 'hello World'},
        {title: 'hello World'}
      ];
    }, 1000);
    
  }]);
/* Styles go here */

.animate-list {
  line-height:40px;
  box-sizing:border-box;
}
 
.animate-list.ng-move,
.animate-list.ng-enter,
.animate-list.ng-leave {
  -webkit-transition:all ease-out 0.5s;
  transition:all ease-out 1s;
}
 
.animate-list.ng-leave.ng-leave-active,
.animate-list.ng-move,
.animate-list.ng-enter {
  opacity:0;
  max-height:0;
}
 
.animate-list.ng-leave,
.animate-list.ng-move.ng-move-active,
.animate-list.ng-enter.ng-enter-active {
  opacity:1;
  max-height:40px;
}
<!DOCTYPE html>
<html ng-app='myApp'>

  <head>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script data-require="angular-animate@*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular-animate.js"></script>
    <link rel="stylesheet" href="app.css" />
    <script src="app.js"></script>
  </head>

  <body ng-controller='AnimateController'>
    <h3>{{title}}</h3>
    
    <input type='text' ng-model='listElement'> 
    <button class='btn-success' ng-click='addToList()'>Add</button>
    
    <ul>
      <li class='animate-list' ng-repeat='item in list' class='enter'>
        {{item.title}}
      </li>
    </ul>
    
  </body>

</html>