Question

我已加入angular-animate.js：

<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/sass-bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/lodash/dist/lodash.compat.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>

并将其添加为依赖项：

angular.module('myApp', [
  'ngRoute',
  'ngAnimate'  
])

我创建了一个ng-repeat列表：

<li ng-repeat="result in search.results" class="movie-list__item list-animation">
  ...        
</li>

定义.list-animation：

.list-animation.ng-enter {
  -webkit-transition: 1s linear all; /* Chrome */
  transition: 1s linear all;
  opacity: 0;
}

.list-animation.ng-enter.ng-enter-active {
  opacity: 1;
}

为什么不起作用？似乎ngAnimate没有将与动画相关的类放入任何元素中。

AngularJS： 1.2.6 angular-animate ：1.2.9

Answer 1

<li ng-repeat="result in search.results" class="movie-list__item list-animation">

应该是

<li ng-repeat="result in search.results" class="movie-list__item list-animation" ng-animate>

ngAnimate不在ng-repeat上添加动画类

1 个答案: