如何在ng-repeat上创建一个简单的动画?

时间:2014-12-26 18:03:38

标签: javascript angularjs

我正在使用angularJS 1.2.28

以下是源代码:

<!DOCTYPE html>
<html>
<head>
<style>
.animate-enter {
    -webkit-transition: 1s linear all; /* Chrome */
    transition: 1s linear all;
    opacity: 0;
}
.animate-enter.animate-enter-active {
    opacity: 1;
}
</style>
  <script src="js/angular.min.js"></script>
  <script src="js/angular-animate.min.js"></script>
</head>

<body>
<div ng-app="" ng-controller="performersController">
<p><input type="search" ng-model="username" ></p>
    they are:  {{performers.length}} performers

<ul ng-animate="'animate'" ng-repeat="performer in performers | filter:username">
  <li> 
    {{ (performer.username | uppercase) + ', ' + performer.id }}
    <img ng-src="{{performer.thumb}}"/>
  </li>

</ul>

</div>

<script>
function performersController($scope, $http) {
    $http.get("ajax.php", {
        params:{
            "action":"search", "order":"username", "ethnicty":"", "keyword":""
        }
    }).success(function(data) {
        $scope.performers = data;
    });
}
</script>

</body>
</html>

1)动画永远不会发生:如何添加动画? (我是否需要包含angular-animate.min.js或者此模块是否包含在angularsjs lib中?)

2)这个脚本适用于角度1.2但是给出了1.3的错误:为什么? 错误:[ng:areq]

有什么想法吗?

0 个答案:

没有答案