ngAnimate模塊douse不加載任何瀏覽器

我已經寫了一個簡單的代碼，它使用get方法從php文件中獲取列表項。他們成功地顯示，而是然而，注射ngAnimate模塊時，似乎它不能正常工作：ngAnimate模塊douse不加載任何瀏覽器

<!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>

來源

2015-04-06 user3651862

我都使用相同的版本都angular.js和animate.js和問題嘗試仍然存在 – user3651862 2015-04-06 14:04:30

我看到一個文件從'http：//'加載，另一個從'https：//'加載。由於CORS問題，兩個人中的一個很可能失敗。你嘗試下載文件並從你自己的機器加載它們嗎？ – Loupax 2015-04-06 14:09:01

@Loupax 親愛的，我試着下載兩個ng-animate模塊和angular.js框架，它們都是相同的版本（1.2.19），但他們從來沒有正常工作。但我想他們在一個單一的網頁應用程序，使用MEAN – user3651862 2015-04-06 22:20:52

我是能夠解決的問題; 這是我能調試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>

來源

2015-04-08 05:55:19 user3651862

@loupax 你去哪裏親愛的 – user3651862 2015-04-08 05:56:48

ngAnimate模塊douse不加載任何瀏覽器

回答

相關問題