ngAnimate is not working

Question

     enter code here.repeat-animation {
    -webkit-transition: 0.5s linear all;
    -moz-transition: 0.5s linear all;
    -o-transition: 0.5s linear all;
     transition: 0.5s linear all;
    position:relative;
    }

   .repeat-animation.ng-enter {
   left:10px;
   opacity:0;
   }
  .repeat-animation.ng-enter.ng-enter-active {
   left:0;
   opacity:1;
   }

  .repeat-animation.ng-leave {
   left:10px;
   opacity:1;
   }
  .repeat-animation.ng-leave.ng-leave-active {
   left:-10px;
   opacity:0;
   }

  .repeat-animation.ng-move {
   opacity:0.5;
   }
   .repeat-animation.ng-move.ng-move-active {
   opacity:1;
    }


            <div class="container">
                <div class="row">
                     <div class="col-md-8 col-md-offset-2">
                   <input class="form-control repeat-animation" type="text" ng-model="customerFilter.name" placeholder="Filter">
             </div>
                </div>
            </div>

             <br/><br/>
             <div class="container">
                 <div class="row">
                     <div class="col-md-12">
                 <table class="table table-responsive table-striped">
                 <tr class="repeat-animation">
                     <th ng-click="doSort('name')">Name</th>
                     <th ng-click="doSort('city')">City</th>
                     <th ng-click="doSort('order')">OrderTotal</th>
                     <th ng-click="doSort('joined')">Join</th>
                     <th>Orders</th>
                     <th>Delete</th>
                 </tr>
                 <tr ng-repeat="cust in customers |filter:customerFilter | orderBy:sortBy:reverse">
                     <td>{{ cust.name | uppercase }}</td>
                     <td>{{ cust.city }}</td>
                     <td>{{ cust.orderTotal | currency: 'AED ' }}</td>
                     <td>{{ cust.joined | date}}</td>
                     <td><a href="#/orders/{{cust.id}}">View Orders</a></td>
                     <td class="center"><span class="glyphicon glyphicon-remove delete" ng-click="remove(cust.id)"></span></td>
                 </tr>
             </table>
             </div>
                 </div>
             </div>
             <br/>
             <div class="container">
                <div class="row" >
                     <div class="col-md-4">
                         <span class="lead">Total number of customers : {{ customers.length }}</span>
                     </div>
                </div>
             </div>

I have included ngAnimate script and dependency also but my animations are not working can anyone solve my issues please,i edit my question with ng repeat,now can you please suggest and my angular and animate version is 1.5

Answer 1

The class you use for your animations need to be placed on the elements you want animated.

In your case it needs to be placed on the same element as ng-repeat:

<tr class="repeat-animation" ng-repeat="...">