Question

我编写了一个简单的代码，它使用get方法从php文件中获取列表项。它们显示成功，但是，当注入ngAnimate模块时，它似乎无法正常工作：

    <!DOCTYPE html>
         <html>

        <head>
     <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
     <script src= "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-animate.min.js"></script>

<style type="text/css">
.slide.ng-enter.ng-enter-active,
.slide.ng-leave {
    opacity: 1;
    height: 80px;
    overflow: hidden;
}

.slide.ng-leave.ng-leave-active,
.slide.ng-leave {
    opacity: 0;
    height: 0;
    overflow: hidden;
}
</style>

</head>

<body>

<div ng-app="myApp" ng-controller="customersCtrl"> 
<input type='text' ng-model='search' placeholder="Search Here">
<ul>
  <li ng-animate="animate" class="slide" ng-repeat="x in names | filter: search">
    {{ (x.Name | uppercase)  + ', ' + x.Country }}
  </li>
</ul>

</div>

<script>
var app = angular.module('myApp', ['ngAnimate']);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("http://www.w3schools.com/angular/customers.php")
  .success(function (response) {$scope.names = response.records;});
});
</script>

</body>
</html>

Answer 1

我能够解决这个问题; 这是一个CSS错字错误，我可以调试：

<!DOCTYPE html>
<html>

<head>

<script src="http://code.angularjs.org/1.2.6/angular.js"></script>
<script src="http://code.angularjs.org/1.2.6/angular-animate.js"></script>

 <style type="text/css">
  .ng-enter {
    transition:0.75s;
    opacity:0;
  }

  .ng-enter-stagger{
    transition-delay:0.3s;
  }
  .ng-enter-active {
    opacity:1;
  }

  .ng-leave-stagger{
    transition-delay:0.3s;
  }

  .ng-leave {
    transition:0.75s;
    opacity:1;
  }

  .ng-leave-active {
    opacity:0;
  }
</style>

<div ng-app="myApp" ng-controller="customersCtrl">
 <input type='text' ng-model='search' placeholder="Search Here">
 <ul>
    <li ng-animate="'animate'" class="slide" ng-repeat="x in names | filter:   search">
     {{ (x.Name | uppercase) + ', ' + x.Country }}
    </li>
    </ul>

    </div>

  <script>
  var app = angular.module('myApp', ['ngAnimate']);
   app.controller('customersCtrl', function($scope, $http) {
     $http.get("http://www.w3schools.com/angular/customers.php")
     .success(function(response) {
       $scope.names = response.records;
      });
     });
   </script>

  </body>

  </html>

ngAnimate模块不会在任何浏览器中加载

1 个答案: