Question

我在ng-repeat中添加了简单的动画，但它无效。见DEMO。这是我的角度代码：

var m = angular.module('App', []);

m.controller('ExampleCtrl', function($scope) {
    $scope.items = [];
    var i = 0;
    $scope.addItems = function() {
        $scope.items.push("test"+i);
        i++;

    }
});

但是它在这里工作：Plunker。我的jsfiddle的代码怎么了？

Answer 1

您的angular版本与工作的plunker不同，更新角度版本将解决您的问题

这是DEMO

但请注意，这个angular版本太旧了，在以后的版本中，animations有一个单独的角度模块，

，角度为1.4.x

此处是Example，其最新版本为angular。

包括angular和angular-animate js个文件。

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular.min.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular-animate.js"></script>

并将angular-animate依赖项添加为

var m = angular.module('App', ['ngAnimate']);

并使用css类作为

.div.ng-enter {
    opacity:0;
    -webkit-transition-duration: 1000ms;
}

.div.ng-enter-active {
   -webkit-transform:scale(1);
    opacity:1;
}

Answer 2

几个问题。

ngAngular不是指令 - 它是一个模块

加载angular-animate.js并在您的moduel中定义依赖关系
您的css选择器与角度命名
不匹配
请参阅ngAnimat classname .ng-enter / classname .ng-leave

＆＃13;

var m = angular.module('App', ['ngAnimate']);

m.controller('ExampleCtrl', function($scope) {
  $scope.items = [];
  var i = 0;
  $scope.addItems = function() {
    $scope.items.push("test" + i);
    i++;

  }
});

＆＃13;

.insert.ng-enter {
    opacity:0;
    -webkit-transition-duration: 1000ms;
}
.insert.ng-enter.insert.ng-enter-active {
    -webkit-transform:scale(1);
    opacity:1;
}
.div{
    width:300px;
    padding:30px;
    background:#ccc;
    margin:5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-animate.min.js"></script>


<div ng-controller="ExampleCtrl" ng-app='App' class="list">
  <button ng-click="addItems()">Add Items</button>
  <div class="div insert" ng-repeat="item in items">
    {{item}}
  </div>
</div>

＆＃13;

Angular ng-animate不起作用。为什么？

2 个答案: