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>

我也包含了ngAnimate脚本和依赖项，但我的动画无效任何人都可以解决我的问题，我用ng重复编辑我的问题，现在可以请你建议我的角度和动画版本是1.5

Answer 1

您用于动画的类需要放在想要设置动画的元素上。

在您的情况下，它需要放在与ng-repeat相同的元素上：

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

ngAnimate不起作用

1 个答案: