AngularJS 1.2.14 Animation of ng-repeat items

Question

I have a table, I want rows to disappear due to the search result:

<tbody>
    <tr ng-click="open(item._id)" ng-animate="'animate'" ng-repeat="item in itemList | filter:searchText" >
      <td>{{$index + 1}}</td>
      <td>{{item.name}}</td>
      <td>{{item.description}}</td>
      <td>{{item._id}}</td>
    </tr>
</tbody>

My App references the ngAnimate module in the app.js - file:

var app = angular.module("app", ["ngAnimate", "appController", "appFactory", "appConfig"]);

The sources of the index.html:

<link href="/css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="/css/custom/custom.css" rel="stylesheet">

<script src="/js/libs/bootstrap/bootstrap.js"></script>
<script src="/js/libs/angular/angular.min.js"></script>
<script src="//code.angularjs.org/1.2.14/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-route.js"></script>
<script src="js/controller/app.js"></script>

Therefore I use this css:

.animate-enter, .animate-leave {

transition: 500ms ease-in all;
position: relative;
display: block;
} 

.animate-enter.animate-enter-active, .animate-leave {
left: 0;
}
.animate-leave.animate-leave-active, .animate-enter {
left: 500px;
}

Unfortunately nothing is happening.

Answer 1

Replace ng-animate="'animate'" with class="animate" Then the css should be:

.animate.ng-enter, .animate.ng-leave {
  transition: 500ms ease-in all;
  position: relative;
  display: block;
} 

.animate.ng-enter.ng-enter-active, .animate.ng-leave {
  left: 0;
}
.animate.ng-leave.ng-leave-active, .animate.ng-enter {
  left: 500px;
}

The ng-animate attribute was replaced with class starting around version 1.2 Docs for ngAnimate